Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
533 views
in Technique[技术] by (71.8m points)

javascript - 已更新-其他问题,已解决。 (原始-使用promise vs async / await时以不同的方式获取解析json)(Updated- different problem, resolved. (original - fetch resolve json differently when using promise vs async/await))

UPDATE 11/28:(更新11/28:)

Problem resolved.(问题已解决。)

It was in fact a completely different problem, irrelevant to fetch/ajax/etc, but unwanted object update via reference.(实际上,这是一个完全不同的问题,与fetch / ajax / etc不相关,但是不需要通过引用来更新对象。)

What misled me was that the actual code I use has a subsequent step after console.log.(误导我的是,我使用的实际代码在console.log之后有一个后续步骤。)

That subsequent step altered the data json, and as a consequence console.log value changed.(随后的步骤更改了数据json,结果console.log值也更改了。) It's fixed by deep clone the json.(可以通过深度克隆json来解决。)

What remains unsure to me is that why console.log comes before the data alteration but is affected -- guess console.log is async in this case.(我仍然不确定的是,为什么console.log在数据更改之前出现但受到影响-猜测在这种情况下console.log是异步的。)

=================== Original:(===================原始:)

Super weird problem.(超级怪异的问题。)

My frontend needs to GET data from backend, so I used fetch in a promise chaining style, such as(我的前端需要从后端获取数据,因此我以承诺链接的方式使用了访存,例如)
fetch(myUrl, {credntials: 'include'})
  .then(res=>{
    if(res.status==200){
      return res.json()
    }
    else{
      return null
    }
  })
  .then(json=>{
    if(json){
      console.log(json)
    }
  })

Seems to be working fine and I got some data back.(似乎工作正常,我得到了一些数据。)

However, I noticed that the resolved JSON is different from the expected response from backend.(但是,我注意到解析的JSON与后端的预期响应不同。) For example, the backend outputs {'a': {'aa':1, 'bb':1}} , and the resolved res.json() gives me something like {'a': {'aa':2, 'bb':1}} .(例如,后端输出{'a': {'aa':1, 'bb':1}} ,解析的res.json()给我类似{'a': {'aa':2, 'bb':1}} 。) The change seems to be inconsistent, I got different res.json() value when tried again and again.(更改似乎不一致,一次又一次尝试时,我得到了不同的res.json()值。)

I then tried several different way to GET data:(然后,我尝试了几种不同的获取数据的方式:)

1) typed in url in browser address bar => got correct data(1)在浏览器地址栏中输入url =>获得正确的数据)

2) use jQuery ajax method instead of fetch => got correct data(2)使用jQuery ajax方法而不是fetch =>获得正确的数据)

3) change promise chaining to async/await => this got correct data too!(3)将诺言链更改为异步/等待=>这也获得了正确的数据!)

let resp = await fetch(myUrl, {credentials: 'include'})
let json = await resp.json()
console.log(json)

4) tried the promise chained fetch, still incorrect data!(4)尝试了诺言链式获取,仍然是错误的数据!)

Super confused.(超级困惑。)

Am I using fetch wrong?(我使用提取错误吗?) Is it a bug?(是虫子吗?) Is it the browser?(是浏览器吗?) Is it the polyfill (I'm using "whatwg-fetch": "3.0.0" , but on Chrome, Mac, which in theory the polyfill should not affect anything at all)?(是"whatwg-fetch": "3.0.0" (我使用的是"whatwg-fetch": "3.0.0" ,但是在Chrome,Mac上,从理论上讲,polyfill完全不会影响任何东西)?) Is it response header settings (Django, JsonResponse)?(它是响应标头设置(Django,JsonResponse)吗?) Has anyone had similar experience?(有没有人有类似的经历?)

Update: attach the headers(更新:附加标题)

Request URL: ...
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: no-referrer-when-downgrade

Response Headers:
HTTP/1.1 200 OK
Date: Wed, 27 Nov 2019 19:39:26 GMT
Server: WSGIServer/0.2 CPython/3.6.6
Content-Type: application/json
Allow: GET, HEAD, OPTIONS
Content-Length: 1559
Vary: Origin, Cookie

Request Headers:
GET ... HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
Accept: */*
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Referer: http://127.0.0.1:8000/...
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh-TW;q=0.7,zh;q=0.6
Cookie: ...

When I check the Preview and Response in chrome developer tools, both of them show correct data.(当我在chrome开发人员工具中检查“ Preview和“ Response时,它们都显示正确的数据。)

However the console.log(json) line outputs differently.(但是console.log(json)行的输出不同。)   ask by rollerCoaster translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Perhaps this is a typo, credentials is spelled differently between both requests you listed here:(也许这是一个错字,您在此处列出的两个请求之间的凭据拼写都不同:)

fetch(myUrl, {**credntials:** 'include'})

vs here:(vs这里:)

let resp = await fetch(myUrl, {**credentials:** 'include'})

If this doesn't resolve the issue, let me know but it seems extremely unlikely that this is a difference of async/await vs regular promises.(如果这不能解决问题,请告诉我,但这似乎不太可能是异步/等待与常规承诺的区别。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...