iT邦幫忙

0

chrome 開發者工具生成的 fetch 呼叫 then json 報 Unexpected end of JSON input 錯誤問題

為何在網頁 https://jsonplaceholder.typicode.com/ 使用

fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then(response => response.json())
	.then(json => console.log(json));

可以正常得到資料

image-20200820155042244

但是使用 chrome 開發者工具生成的 fetch 就不行

image-20200820155115671

fetch("https://jsonplaceholder.typicode.com/todos/1", {
  "headers": {
    "accept": "*/*",
    "accept-language": "en-US,en;q=0.9",
    "if-none-match": "W/\"53-hfEnumeNh6YirfjyjaujcOPPT+s\"",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "same-origin"
  },
  "referrer": "https://jsonplaceholder.typicode.com/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors",
  "credentials": "include"
}).then(response => response.json()).then(json => console.log(json));

image-20200820155336923

錯誤訊息 :

Uncaught (in promise) SyntaxError: Unexpected end of JSON input
    at <anonymous>:16:30
看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2020-08-20 16:54:32 檢舉
但是我可以...發生什麼事了XD
難道是傳說中的 "我長的X所以才不行" ?! T_T
我換 firefox console測試一樣
![image-20200820170830301](https://i.loli.net/2020/08/20/ucK1SzyX4j3oTOV.png)

w3c測試連結 : https://www.w3schools.com/code/tryit.asp?filename=GHXE5USRDX9C
dragonH iT邦超人 5 級 ‧ 2020-08-20 17:12:46 檢舉
我的不行

不過看error message

就是他回傳給你的東西沒辦法轉成 json

建議多測試

不要直接複製貼上
dragonH iT邦超人 5 級 ‧ 2020-08-20 17:15:01 檢舉
我看到回傳的 status code 是 304
感謝 dragonH 大神!
Luis-Chen iT邦新手 4 級 ‧ 2020-08-22 09:25:58 檢舉
應該是要加if(res.ok) { res.json().then(data => data)},連線成功在call data
Luis-Chen iT邦新手 4 級 ‧ 2020-08-22 09:28:27 檢舉
然後寫 try catch
try{
const res = fetch("https://jsonplaceholder.typicode.com/todos/1")
if(res.ok) { res.json().then(data => data)
}else{
console.log(res)
}

} catch (err) {
console.log(err)
}

1 個回答

2
froce
iT邦大師 1 級 ‧ 2020-08-20 20:19:29
最佳解答

這樣就行了。
"if-none-match"造成cache。
把他後面那串ETAG改掉也能得到正確答案。

fetch("https://jsonplaceholder.typicode.com/todos/1", {
  "headers": {
    "accept": "*/*",
    "accept-language": "en-US,en;q=0.9",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "same-origin"
  },
  "referrer": "https://jsonplaceholder.typicode.com/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors",
  "credentials": "include"
}).then(response => response.json()).then(json => console.log(json));

https://blog.techbridge.cc/2017/06/17/cache-introduction/

froce 大神 , 感謝您的文章 , 終於知道點在哪!

我要發表回答

立即登入回答