React中useEffect调用Axios接口首次加载无法获取返回值问题求助

问题根因 #

React useEffect 不允许直接传入 async 异步函数作为回调参数。useEffect 要求回调函数的返回值只能是清理函数或者 undefined，但 async 函数默认返回 Promise 实例，不符合入参规则，会导致首次渲染时异步请求的时序异常，这就是你刷新页面报错、热更新后临时正常的核心原因——热更新属于增量更新，不会触发完整的 useEffect 初始化校验，所以不会触发该异常。

修复代码 #

修改 /src/App.js 中的 useEffect 写法，将异步逻辑封装到内部的独立函数中调用即可：

useEffect(() => {
  // 异步逻辑放在内部定义的async函数里执行
  const getPokemonList = async () => {
    const res = await service.apiPokemon.fetchAll();
    console.log(res.data.next);
  };
  getPokemonList();
}, []);

额外优化 #

你封装的 fetchAll 方法在 catch 分支仅打印错误没有返回值，一旦接口请求失败，上层拿到的 res 就是 undefined，调用 res.data 会直接抛出报错，可以补充兜底逻辑：

import axios from 'axios';
const URL = 'https://pokeapi.co/api/v2/pokemon';

export const fetchAll = async () => {
    try {
        const res = await axios.get(URL);
        console.log(res.data.next);
        return res;
    } catch (error) {
        console.log(error);
        // 补充兜底返回，也可以选择抛出错误让上层捕获处理
        return { data: {} };
    };
};

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