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?

Hypostasis

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} – Pickering

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. – Jenaejenda

Answer 1

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" /> 

Nablus

Answer 2

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.

Farnsworth

Answer 3

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:

1. Connect to network.

2. Restart emulator.

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

Burbank

Answer 4

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.

Beneath

Answer 5

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

Radke

In the same doc that you posted, it shows that you can do https with Fetch as well – Stockbroker