Next.js中使用Axios调用API返回Promise pending问题求助

问题原因 #

所有async函数的返回值本质都是Promise，哪怕你在函数内部用了await处理异步操作，直接调用getCats()也只会拿到处于pending状态的Promise对象，不会直接获取到API返回的数据。你的代码里直接在组件渲染逻辑中调用console.log(getCats())，自然会输出pending的Promise。

解决方案 #

根据Next.js的不同渲染场景，有两种常用处理方式：

1. 客户端组件中异步获取数据（结合useEffect）

React组件的渲染函数不能是async函数，所以需要在useEffect钩子中创建异步函数并执行，同时用状态管理数据和错误：

import { useEffect, useState } from 'react';
import { getCats } from "./api/httpClient";

const Home = () => {
  const [catFact, setCatFact] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchCatData = async () => {
      try {
        const response = await getCats();
        setCatFact(response.data.fact);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchCatData();
  }, []);

  if (error) return <div>请求出错：{error}</div>;
  return <div>{catFact ? `猫咪冷知识：${catFact}` : '加载中...'}</div>;
};

export default Home;

2. 服务端预渲染获取数据（getServerSideProps/getStaticProps）

如果希望在服务端完成数据请求，再将数据传递给组件渲染，可以使用Next.js的服务端预渲染方法：

import { getCats } from "./api/httpClient";

const Home = ({ catFact, error }) => {
  if (error) return <div>请求出错：{error}</div>;
  return <div>猫咪冷知识：{catFact}</div>;
};

export async function getServerSideProps() {
  try {
    const response = await getCats();
    return {
      props: {
        catFact: response.data.fact,
        error: ''
      }
    };
  } catch (err) {
    return {
      props: {
        catFact: '',
        error: err.message
      }
    };
  }
}

export default Home;

补充说明 #

你的httpClient.js代码本身没有问题，async/await已经正确处理了Axios的异步请求，问题出在组件中调用异步函数的方式——没有等待Promise完成就直接输出，导致看到pending状态。

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