react-native: fetch API doesn't resolve or reject

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ i7-3540M CPU @ 3.00GHz Memory: 226.52 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.9.0 - /usr/local/bin/node Yarn: 1.2.1 - /usr/local/bin/yarn npm: 5.5.1 - /usr/local/bin/npm Watchman: 4.7.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3 Android SDK: Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.2, 26.0.3, 27.0.3, 28.0.1 API Levels: 14, 15, 16, 17, 18, 19, 20, 22, 23, 25, 26, 8 IDEs: Android Studio: 3.1 AI-173.4819257 Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild npmPackages: react: 16.4.1 => 16.4.1 react-native: ^0.56.0 => 0.56.0 npmGlobalPackages: create-react-native-app: 1.0.0 react-native-cli: 2.0.1 react-native-create-library: 3.1.2 react-native-git-upgrade: 0.2.7

Description

Using the example of networking doc to fetch movie.json from facebook server doesn’t work.

I had traced the code to dispatchEvent which doesn’t trigger load event. The reason is event-target-shim@1.1.1 cannot find any ‘load’ event listeners.

Reproducible Demo

check out github repo: https://github.com/john-hu/react-native-fetch-no-resolve-reject
npm install
react-native run-android
open debugger ui to see console

Expected Result

see the following console.log

before fetch
fetch sent
{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "id": "1", "title": "Star Wars", "releaseYear": "1977"},
    { "id": "2", "title": "Back to the Future", "releaseYear": "1985"},
    { "id": "3", "title": "The Matrix", "releaseYear": "1999"},
    { "id": "4", "title": "Inception", "releaseYear": "2010"},
    { "id": "5", "title": "Interstellar", "releaseYear": "2014"}
  ]
}
[Array]

Actual Result

before fetch
fetch sent

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 8
Comments: 51 (2 by maintainers)

Most upvoted comments

@kelset I’m having this issue using 0.59.1. It works fine in debug mode, but isn’t working when I build the release APK

Tino-F on May 5, 2019

I have this issue as well with react-native 0.56.0. Can you guys stop closing issue for no reason? This is a real issue! Have this problem with or without @babel/plugin-proposal-class-properties

raphaelgodro on Oct 18, 2018

@alexisbronchart Thanks for this information. I can confirm that this issue is gone after the @babel/plugin-proposal-class-properties removed.

john-hu on Sep 28, 2018

@paul-todd2 Thanks for the information. Actually, I use Android smart phone to test it. I found it happens randomly. For some unknown cases, I can reproduce it 100%…

john-hu on Aug 7, 2018

@msafayasar I got a workaround which worked at the debug and release mode. I gave up to fetch. I use the XMLHttpRequest. According to my previous finding, event-target-shim cannot dispatchEvent through onload. But it can dispatchEvent through addEventListener.

Today, I come back to this issue and try to find a workaround. I use the following code which resolves or rejects correctly:

export const fetchText = (url) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.addEventListener('readystatechange', (e) => {
            if (xhr.readyState !== 4) {
                return;
            }
            if (xhr.status === 200) {
                resolve(xhr.responseText);
            } else {
                reject(e);
            }
        });
        xhr.open('GET', url);
        xhr.send();
    });
};

Please give it a try.

john-hu on Sep 26, 2018

Happens same on my codebase. I upgraded from 0.55 to 0.56 and fetch calls aren’t getting completed. However on enabling network inspect in debugger, the fetch calls are resolved/rejected normally.

xinhash on Jul 27, 2018

@NicolasSmit it’s done on the server that you’re fetching to and it depends on what kind of server you’re using whether it’s a Node, Apache, Nginx, etc. so the instructions will vary for each. I used let’s encrypt to generate the cert, private key & chain file.

You can check out their article on how to get started setting up ssl here: https://letsencrypt.org/getting-started/

Tino-F on May 9, 2019

I always thought we are not using the class properties plugin. But we are using the preset babel-preset-expo which is using the metro-react-native-babel-preset under the hood. So as of this we are also using this plugin. I will try to remove this plugin somehow. Thanks for the hint.

JPeer264 on Jan 29, 2019