Fetch 和 Axios 不适用于 React Native

Question

我现在尝试了 3 个不同的项目来使 fetch 或 axios 工作，但我不能。我尝试过更改 android 清单，就像某些人在某些问题上尝试过的那样，但它不起作用。不是等待/异步，不是承诺，甚至不是这个超级简单的例子。甚至都没有调用 finally。

它不返回错误、日志或任何东西，什么也没有发生。

经过进一步测试，看起来 Mac/IOS 可以正常工作，但 Windows/Android 不行。

/**
 * 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('hola');
    fetch('http://jsonplaceholder.typicode.com/albums')
      .then(response => {
        console.log('Hola');
        console.log(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;

这是 package.json：

{
  "name": "prueba",
  "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"
  }
}

Answer 1

问题是您使用的是http 而不是https，因此无法获取。

您可以通过两种方式编写您的 api 调用

普通提取

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'));
};

异步/等待（我的偏好）

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

Working Example

把你的代码改成这个

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;