React项目调用异步API函数控制台输出Promise{<pending>}而非数据求助

你遇到的问题很常见——因为fetchData是一个async函数，所有async函数的返回值都是Promise对象。当你直接调用fetchData()并打印时，API请求还没完成，Promise处于等待（pending）状态，所以控制台输出了Promise{<pending>}。

要获取到实际的响应数据，你需要处理这个Promise，这里有两种常用的方法：

方法1：使用.then()链式处理Promise #

修改src/App.js中的useEffect部分：

import React, { useEffect } from 'react';
import { fetchData } from './api';

const App = () => {
  useEffect(() => {
    fetchData().then(response => {
      console.log('实际响应数据:', response);
      // 在这里可以对拿到的数据进行后续处理，比如更新组件state
    });
  }, []);

  return <div></div>;
};

export default App;

方法2：在useEffect内部使用async/await #

注意：useEffect的回调函数不能直接声明为async（会导致清理函数失效），所以我们可以在内部定义一个异步函数然后调用：

import React, { useEffect } from 'react';
import { fetchData } from './api';

const App = () => {
  useEffect(() => {
    // 定义内部异步函数
    const fetchAndProcessData = async () => {
      try {
        const response = await fetchData();
        console.log('实际响应数据:', response);
        // 处理数据，比如设置组件state
      } catch (error) {
        // 捕获请求失败的错误，做容错处理
        console.error('获取数据失败:', error);
      }
    };

    fetchAndProcessData();
  }, []);

  return <div></div>;
};

export default App;

额外优化建议 #

你还可以优化src/api/index.js中的fetchData函数，直接返回API响应的业务数据（而不是整个axios响应对象），同时完善错误处理：

import axios from 'axios';
const url = 'https://covid19.mathdro.id/api';

export const fetchData = async () => {
  try {
    // 解构axios响应中的data字段，直接返回业务数据
    const { data } = await axios.get(url);
    return data;
  } catch (error) {
    console.error('API请求失败:', error);
    // 抛出错误让调用方可以捕获处理
    throw error;
  }
};

这样在组件中拿到的就是更简洁的业务数据，不需要再从response中提取data了。

内容的提问来源于stack exchange，提问作者Jay Jay