使用Axios配合async/await调用API返回Promise对象而非预期数据问题

数据老陈

2026-10-6

原因说明

JavaScript语法规定所有async修饰的函数，返回值都会被自动封装为Promise对象，和你内部返回的payload.data类型无关，这就是你直接调用得到Promise而非数组的核心原因。
从你贴的控制台日志可以看到，Promise状态已经是fulfilled，说明接口请求已经成功，你需要的数组数据就存放在Promise的结果中，只需按规范提取即可。

使用示例

你代码中引入了React相关Hooks，大概率是要在React组件中调用该接口，两种正确写法如下：

方案1：通过.then回调取数

import React, { useEffect, useState } from "react";
import apiTest from "./apiTest"; // 替换为你实际的文件引入路径

function DemoComponent() {
  const [dataList, setDataList] = useState([]);

  useEffect(() => {
    // 调用async函数后通过.then拿返回数据
    apiTest().then(res => {
      setDataList(res);
      console.log("拿到的目标数组：", res);
    })
  }, [])

  // 后续渲染dataList的逻辑
  return <></>
}

方案2：通过await取数

import React, { useEffect, useState } from "react";
import apiTest from "./apiTest";

function DemoComponent() {
  const [dataList, setDataList] = useState([]);

  useEffect(() => {
    // 封装async自执行函数，内部用await拿数据
    const fetchData = async () => {
      const res = await apiTest();
      setDataList(res);
      console.log("拿到的目标数组：", res);
    }
    fetchData();
  }, [])

  return <></>
}

注意事项