为何调用axios封装的async函数返回Promise而非预期数据？

原因 #

所有async函数的返回值都会被自动包装成Promise对象——哪怕你在函数内部用await拿到了最终数据并return，这个return的值也会作为Promise的fulfilled值。所以你直接调用fetchData()得到的是一个处于pending状态的Promise，而不是直接的数组。

你在fetchData内部能拿到数组，是因为await axios.get(URL)会暂停函数执行，直到请求完成并返回解析后的数据，此时的data已经是Promise解析后的结果。但函数本身的返回值依然是Promise。

解决方法 #

因为你是在React组件中调用这个异步函数，所以需要结合useState管理数据状态，useEffect执行异步操作：

方法1：使用async/await配合useEffect #

import { useState, useEffect } from 'react';
import { fetchData } from './你的文件路径';

const DisplayPeople = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        // 在useEffect内部定义async函数
        const getData = async () => {
            try {
                // 等待Promise解析拿到最终数据
                const result = await fetchData();
                setData(result);
            } catch (err) {
                // 处理请求错误
                setError(err);
            } finally {
                // 请求完成后结束加载状态
                setLoading(false);
            }
        };

        getData();
    }, []); // 空依赖数组确保只在组件挂载时执行一次

    // 加载状态提示
    if (loading) return <div>加载中...</div>;
    // 错误状态提示
    if (error) return <div>请求出错：{error.message}</div>;

    return (
        <div>
            {/* 渲染数据 */}
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
};

方法2：使用Promise的.then().catch()方法 #

如果你习惯链式调用，也可以直接处理Promise：

import { useState, useEffect } from 'react';
import { fetchData } from './你的文件路径';

const DisplayPeople = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetchData()
            .then(result => setData(result)) // 拿到数据后更新状态
            .catch(err => setError(err))     // 捕获错误
            .finally(() => setLoading(false)); // 结束加载
    }, []);

    if (loading) return <div>加载中...</div>;
    if (error) return <div>请求出错：{error.message}</div>;

    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
};

注意点 #

• 不要直接在组件顶层或useEffect的回调函数上写async，因为useEffect的回调函数如果返回值，必须是清理函数，而async函数返回Promise，会导致React报错。所以要在useEffect内部定义async函数再调用。
• 一定要处理加载状态和错误状态，避免用户看到空白页面或未处理的错误。

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