React Native: TypeError: Network request failed

It’s been about four weeks since I started react Native’s project, and it’s about the packaging stage. However, I found that the App on the iOS side was working normally. Android apps are slow to update data.
Post my request interface

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();
        })
    },
}

In a nutshell, use fetch to send JSON data to the server via a POST request.
Use the Google browser to debug and make requests
At the end of an android: first success, second failure. Success on the third shot, failure on the fourth…
On iOS: Everything is fine.
The request failed as follows:
TypeError: Network request failed:
 
At the XMLHttpRequest. XHR. Onerror (fetch. Js: 441)
At the XMLHttpRequest. DispatchEvent (event – target. Js: 172)
At the XMLHttpRequest. SetReadyState (XMLHttpRequest. Js: 567)
At the XMLHttpRequest. __didCompleteResponse (XMLHttpRequest. Js: 397)
the at XMLHttpRequest. Js: 503
the at RCTDeviceEventEmitter. Emit (EventEmitter. Js: 179)
the at Messagequeue. ___ callfunction (messagequeue. js:351)
at messagequeue. js:116
at messagequeu. ___ (messagequeue. js:314)
at MessageQueue. CallFunctionReturnFlushedQueue (MessageQueue. Js: 115)
 
 
I was initially skeptical that it was a network framework problem, so I tried XMLHttpRequest, Axios… Without exception. Each time on the androidend the first attempt succeeds and the second attempt fails. Fetch and Axios are both XMLHttprequest-based encapsulations.
 
 
On StackOverflow and Github, someone also proposed sending with FETCH and got TypeErrpr:Network Request failed. I’ve seen almost everything. To summarize their various answers:
If you want to obtain data from the server set up locally on your computer by simulating it through HTTP request, you need to change localhost to the real IP of your computer. If you send an HTTP request from a remote server to get the data, there is basically no solution. One person asked that he solved the problem by demoting RN. Android SDK version issues. Nginx configuration issues…
https://stackoverflow.com/questions/33969333/react-native-fetch-request-failed-with-error-typeerror-network-request-faile
https://stackoverflow.com/questions/38077273/react-native-fetch-network-request-failed-not-using-localhost
https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed
https://github.com/facebook/react-native/issues/10404
I’ve tried to downgrade React Native, and I’ve tested the Android SDK through 23 to 26. But it didn’t work. It didn’t solve the problem.
Then I began to wonder if there was a problem with the interface.
I bought several API interfaces online, both post and GET. Tests have found no success or failure in the android end of the request issue. Which means it has nothing to do with react Native or Android versions. The problem is the interface. But what I can’t explain is that there’s not a single success or failure on iOS. I haven’t had any problems testing interfaces in Python.
“– June 30, 2018
Http1.1 defaults to long connections. Almost all browsers and Ajax default to “Connection”:” keep-alive “in the header. The default for iOS is “Connection”:” Close “.
I’m going to change the request header to

             headers: {
		"Accept": "application/json",
		"Content-Type": 'application/json',   
		"Connection": "close",   
		"type": "getUserData",   
                },"Connection": "close",   
		"type": "getUserData",   
                },

My problem is solved by the above methods.
 
 

Read More: