1. 程式人生 > >React Native: TypeError: Network request failed

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",   
                },

我的問題通過以上方法解決。