Unexpected token in JSON at position 0 解析

引言

最近搗鼓RN，做了個項目，但是到調試接口的時候出了一個小問題，因爲以前用的都是ajax和axios，這回rn自己提供了一個fetch的api，所以就索性用提供的了，然後就掉進坑裏了……他！報錯了

Unexpected token in JSON at position 0 眼熟的錯誤，可能以前當你發送一個HTTP請求的時候，都曾出現過這個錯誤提示或者相似的錯誤，那這個錯誤是由什麼引起的呢

報錯原因

這些錯誤發生在你向服務器發送請求的時候，返回值不是JSON而你卻用JSON的方法解析的時候，可能會發生這種情況

fetch(’/api’).then(res => res.json())

這句代碼本身是沒有問題的，他會得到一個返回值，問題出在res.json()上面

Unexpected token in JSON at position 0 他所提示的符號和位置可能不同，但是引起他的原因是一樣的，代碼解析的JSON不是有效的JSON

解決方法

既然用JSON方法沒法將結果打印出來，那可以換一個思路，先用res.text()將結果打印出來，查看哪裏出問題了

可以看到，fetch返回值是異步的，所以打印一定要在.then(){}裏進行，因爲是異步的，這裏主要看[[PromiseValue]]裏的值，會發現他並不是一個純粹的對象，他前邊還有字符串，可以猜測這個接口使用JSP去解決跨域的（太low了也）。

現在我們就懂了，是因爲返回值不是JSON，那就好辦了，下面我就不過多闡述了，應該都會了

番外 ： 是服務器的鍋？

這裏順便再記錄幾個你的接口可能返回html而不是JSON的問題

• 請求的url不存在 ， 服務器以HTML的方式返回404頁面

• 添加了新的路由，服務器需要重啓

• 客戶端沒有設置代理

  如果在使用 CRA的webpack dev server時，你可以設置一個指向後端的代理

• api的根url是/

  如果你在通過webpack或者CRA使用代理，確認你的api不在根層級，這樣會讓代理服務器混淆，你將得到一個HTML，你可以在你的api前面增加一個命名空間 /api/

---