Issues with Fetch and Axios in React Native are causing functionality to be limited

Question

Issues with Fetch and Axios in React Native are causing functionality to be limited

For 3 different projects, I have been attempting to get fetch or axios to work without success. I've tried adjusting the android manifest as suggested in some troubleshooting threads, but nothing seems to be working. Whether using await/async, promises, or even a simple example like this one, nothing seems to trigger any response - not even the finally statement is executed.

No errors are returned, no logs are generated, simply nothing happens at all.

Upon further investigation, it appears that the Mac/iOS setup works fine, but there seems to be an issue with Windows/Android configurations.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useEffect} from 'react';
import {SafeAreaView, Text} from 'react-native';

const App = () => {
  useEffect(() => {
    console.log('hello');
    fetch('http://jsonplaceholder.typicode.com/albums')
      .then(response => {
        console.log('Hello');
        console.log(response.json());
      })
      .then(json => console.log(json))
      .catch(error => console.error(error))
      .finally(() => console.log('Finally'));
  }, []);

  return (
    <SafeAreaView>
      <Text>Hello</Text>
    </SafeAreaView>
  );
};

export default App;

This is how the package.json file looks:

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "axios": "^0.21.1",
    "react": "17.0.1",
    "react-native": "0.64.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

javascript typescript react-native axios fetch

Answer 1

Answer №1

The issue stemmed from utilizing http instead of https, resulting in a fetch failure.

There are two ways to structure your API call:

Standard Fetch Method

const NORMAL_FETCH = () => {
  fetch('https://jsonplaceholder.typicode.com/albums')
    .then((response) => {
      return response.json();
    })
    .then((json) => console.log(json))
    .catch((error) => console.error(error))
    .finally(() => console.log('Finally'));
};

Async/Await Approach (my personal preference)

const API_CALL_ASYNC_AWAIT = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/albums');
    const jsonResponse = await response.json();
    console.log(jsonResponse);
  } catch (error) {
    console.log(error);
  }
};

See the live demo here

Revise your code to this updated version:

import React, { useEffect } from 'react';
import { SafeAreaView, Text } from 'react-native';

const App = () => {
  useEffect(() => {
    API_CALL_ASYNC_AWAIT();
    NORMAL_FETCH();
  }, []);

  const API_CALL_ASYNC_AWAIT = async () => {
    try {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/albums'
      );
      const jsonResponse = await response.json();
      console.log(jsonResponse);
    } catch (error) {
      console.log(error);
    }
  };

  const NORMAL_FETCH = () => {
    fetch('https://jsonplaceholder.typicode.com/albums')
      .then((response) => {
        return response.json();
      })
      .then((json) => console.log(json))
      .catch((error) => console.error(error))
      .finally(() => console.log('Finally'));
  };

  return (
    <SafeAreaView>
      <Text>Hola</Text>
    </SafeAreaView>
  );
};

export default App;

Answer 2

The issue stemmed from utilizing http instead of https, resulting in a fetch failure.

There are two ways to structure your API call:

Standard Fetch Method

const NORMAL_FETCH = () => {
  fetch('https://jsonplaceholder.typicode.com/albums')
    .then((response) => {
      return response.json();
    })
    .then((json) => console.log(json))
    .catch((error) => console.error(error))
    .finally(() => console.log('Finally'));
};

Async/Await Approach (my personal preference)

const API_CALL_ASYNC_AWAIT = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/albums');
    const jsonResponse = await response.json();
    console.log(jsonResponse);
  } catch (error) {
    console.log(error);
  }
};

See the live demo here

Revise your code to this updated version:

import React, { useEffect } from 'react';
import { SafeAreaView, Text } from 'react-native';

const App = () => {
  useEffect(() => {
    API_CALL_ASYNC_AWAIT();
    NORMAL_FETCH();
  }, []);

  const API_CALL_ASYNC_AWAIT = async () => {
    try {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/albums'
      );
      const jsonResponse = await response.json();
      console.log(jsonResponse);
    } catch (error) {
      console.log(error);
    }
  };

  const NORMAL_FETCH = () => {
    fetch('https://jsonplaceholder.typicode.com/albums')
      .then((response) => {
        return response.json();
      })
      .then((json) => console.log(json))
      .catch((error) => console.error(error))
      .finally(() => console.log('Finally'));
  };

  return (
    <SafeAreaView>
      <Text>Hola</Text>
    </SafeAreaView>
  );
};

export default App;

Issues with Fetch and Axios in React Native are causing functionality to be limited

Answer №1

Similar questions

Troubleshooting CSS Animation Failure in Internet Explorer 11

Discovering the index of an item in Angular

In PHP forms, ensure that only completed textboxes are submitted and empty textboxes are discarded

Error in AngularJS when attempting to add a new field within a for loop

Encountering "No overload matches this call" error in Typescript while working with fetched data and material-ui

Refresh the primary component

Is there a way to make a React Component to update and navigate to a specific position using react-sound

What is the best method for testing routes implemented with the application router in NextJS? My go-to testing tool for this is vitest

Error in Next.js: .env variable not defined

What advantages does using a watcher provide over a computed property for handling asynchronous tasks or resource-intensive operations in Vue.js?

Deactivate preset styles in react-select library

Creating an HTML table from a JSON file: Step-by-step guide

Is there a way to prevent Prettier on VS Code from automatically unfolding my code blocks when saving?

Can more than one label be assigned to a single bar in a Google column chart?

Eliminate any line breaks from the information retrieved from the node event process.stdin.on("data") function

node.js is reporting that it cannot locate some of the modules

Navigating using Javascript library in Angular 2 framework

Having trouble getting Node.js, express, socket.io, and ejs to work together?

Conditional generic type in return type with Typescript

Issues arising from Ionic's functionalities when separated controllers are implemented, resulting in