React Native: TypeError: Network request failed
開始react native的專案差不多四周,差不多要打包上架的階段。但是發現,在iOS端App執行一切正常。安卓端App的資料更新很慢。
貼一下我的請求介面
let NetUtil = { postJson(type, data){ return new Promise(function (resolve, reject) { fetch("http://www.samplesite.com",{ method: 'POST', headers: { "Accept": "application/json", "Content-Type": 'application/json', "type":"getUserData" }, body: JSON.stringify(data) }).then((response) => { if (response.ok) { return response.json(); } else { reject({status:response.status}) } }).then((response) => { resolve(response); }).catch((error) => { console.log(error); }).done(); }) }, }
一句話概括就是用fetch通過POST請求發JSON資料給伺服器。
用谷歌瀏覽器除錯,發請求
在安卓端:第一次成功,第二次發就會失敗。第三次發成功,第四次發失敗......
在iOS端:一切正常。
請求失敗的提示如下:
TypeError: Network request failed:
at XMLHttpRequest.xhr.onerror (fetch.js:441)
at XMLHttpRequest.dispatchEvent (event-target.js:172)
at XMLHttpRequest.setReadyState (XMLHttpRequest.js:567)
at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:397)
at XMLHttpRequest.js:503
at RCTDeviceEventEmitter.emit (EventEmitter.js:179)
at MessageQueue.__callFunction (MessageQueue.js:351)
at MessageQueue.js:116
at MessageQueue.__guardSafe (MessageQueue.js:314)
at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:115)
我起初懷疑是網路框架的問題,所以我嘗試了 XMLHttpRequest,Axios...無一例外。在安卓端每次都是第一次成功,第二次請求失敗。(fetch 和 Axios 都是基於 XMLHttpRequest的封裝)。
在stackoverflow和github上有人也提出用fetch傳送也得到TypeErrpr:Network request failed的錯誤。我差不多都看過了。總結下他們的所謂的各種答案:
- 如果是希望從電腦本地搭建的伺服器模擬通過http請求形式獲取資料,需把localhost改成電腦的真實ip.
- 如果是從遠端伺服器發http請求獲取資料,基本無解。有個人發問說他通過把RN降級解決了這個問題.
- 安卓sdk版本問題.
- nginx配置問題...
我試過給react native降級 ,android sdk 到23~26都測試過。但是沒用,沒有解決問題。
後來我開始懷疑,是不是介面有問題。
我在網上買了幾個api介面,post 和get的都有。測試下來發現都沒出現在安卓端發請求一次成功一次失敗的問題。也就是說問題跟react native 和安卓版本都沒關係。問題出在介面。但是我無法解釋的是,在iOS端沒有出現一次成功一次失敗的情況。平時用python測試介面也沒出現過啥問題。
--2018-6-30-- --聯調補充---
http1.1預設是長連線,幾乎瀏覽器,Ajax都預設訊息頭中的"Connection":"keep-Alive".。而iOS端應該是預設"Connection":"close"。
我把請求頭改成
headers: {
"Accept": "application/json",
"Content-Type": 'application/json',
"Connection": "close",
"type": "getUserData",
},
"Connection": "close",
"type": "getUserData",
},
我的問題通過以上方法解決。