React Native Fetch Request Fails

Question

I am using the react native Fetch API to get JSON data from https://api.github.com/users/{username} but the request fails with the following error message.

"TypeError: Network request failed {stack: (...), message: 'Network request failed'}".

I believe for https, sometimes you get NSURLAuthenticationChallenge. I am not sure how to implement this. Anyone have any idea about this?

it's difficult to tell without the code snippet, but you could try adding `/` to the end of the url you're using. also interpolation is done using `#{username}` — MikaelC, Aug 07 '15 at 15:45
Can you provide some minimal code to reproduce this error? One way to get it is to try to `fetch` an invalid URL, but there's no way to say what caused it in your case without you showing some code. — Mark Amery, Nov 27 '15 at 12:36

score 2 · Answer 1 · answered Mar 26 '18 at 01:29

If you are using iOs you may need to do the following:

You must enable your AppTransportSecurity

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

or

in the Info.plist.

For Android ensure that you have added permission to use INTERNET in the AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET" />

score 1 · Answer 2 · answered May 12 '15 at 04:53

Can you provide an snippet of your fetch code?

Generally, a fetch statement is written like:

fetch(requestURL)
  .then( (response) => response.json() )
  .then( (data) => {
    this.setState({data: data});
   })
  .catch( (error) => console.log(error) )
  .done();

Catching the error will allow the program to proceed without crashing.

score 0 · Answer 3 · answered Mar 26 '16 at 17:16

In my case the issue wasn't in the code. I started emulator when had no network. After I logged in to wifi point network on emulator still wasn't functioning. I restarted emulator - all worked.

So:

Connect to network.
Restart emulator.

If it doesn't help, then check your code.

score 0 · Answer 4 · answered May 25 '16 at 07:30

I was also having this issue React Native Fetch Request Fails very frequently.

In my case the response from the API call was around 5kb , so i removed the unnecessary data from the API response and reduced the result size to around 1kb and all started working.

So try to limit the data you are requesting from the API.

score -3 · Answer 5 · answered May 02 '15 at 14:07

-3

Have you tried XMLHttpRequest?

As demonstrated in the doc, https is supported by XMLHttpRequest:

var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint.php');
request.send();

answered May 02 '15 at 14:07

Menway

198
1
3

In the same doc that you posted, it shows that you can do https with Fetch as well – Koes Bong May 22 '15 at 19:33

React Native Fetch Request Fails

5 Answers5