React中使用AXIOS如何根据API返回结果条件发起新请求？

你拿到Promise<pending>的核心原因是没有等待第二个Axios异步请求完成就直接取值了：Axios的所有请求本身都是Promise实例，如果你在catch块内直接返回第二个Axios调用而没有通过await或者链式.then处理状态，拿到的自然是未完成的pending状态Promise。

方案1：链式.then/.catch写法 #

这种写法适合偏好Promise原生链式调用的场景，注意要先判断错误是否为404状态，避免所有错误都触发 fallback 请求：

axios.get('/api/第一个接口地址')
  .then(firstRes => {
    // 第一个接口请求成功的处理逻辑，比如更新state
    setData(firstRes.data);
    return firstRes.data;
  })
  .catch(error => {
    // 仅当第一个接口返回404时发起第二个请求
    if (error.response && error.response.status === 404) {
      // 返回第二个请求的Promise，接入链式调用
      return axios.get('/api/第二个接口地址');
    }
    // 非404错误直接抛出，交给最终的错误捕获处理
    throw error;
  })
  .then(secondRes => {
    // 这里拿到的是第二个接口请求成功的结果
    setData(secondRes.data);
  })
  .catch(finalError => {
    // 处理所有错误场景：非404错误、第二个接口请求失败
    console.error('请求失败：', finalError);
  })

方案2：async/await写法（更推荐） #

这种写法逻辑更清晰，更容易避免Promise pending的问题，适合在React的useEffect或者事件处理函数中使用：

import { useState, useEffect } from 'react';
import axios from 'axios';

function YourComponent() {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    try {
      // 发起第一个请求
      const firstRes = await axios.get('/api/第一个接口地址');
      setData(firstRes.data);
    } catch (firstError) {
      // 判断是否为404错误
      if (firstError.response?.status === 404) {
        try {
          // 发起第二个请求
          const secondRes = await axios.get('/api/第二个接口地址');
          setData(secondRes.data);
        } catch (secondError) {
          console.error('第二个接口请求失败：', secondError);
        }
        return;
      }
      // 处理非404的其他错误
      console.error('请求异常：', firstError);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  // 组件渲染逻辑
  return <div>{/* 渲染内容 */}</div>
}

• 不要跳过状态码判断直接在catch里发起 fallback 请求，避免网络错误、500等其他异常场景也触发不必要的第二个请求
• 所有Axios调用都需要加await或者通过.then回调取值，直接取Axios调用的返回值必然是pending状态的Promise
• 如果需要取消请求避免内存泄漏，可以结合Axios的CancelToken或者AbortController在组件卸载时终止未完成的请求

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