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