axios GET请求返回值无法在请求函数外部读取的问题求助

问题成因 #

这是JavaScript的异步执行机制导致的：

• axios.get() 是基于Promise实现的异步网络请求，发起请求后不会阻塞后续代码运行，JavaScript引擎会优先执行所有同步代码，等网络请求完成后才会执行then中定义的回调逻辑。
• 你写在axios.get()外部的console.log属于同步代码，执行时网络请求还没返回结果，then中给数组y填充数据的逻辑还没有运行，所以此时打印的还是初始化的空数组。
• 如果你发现控制台打印的空数组展开后能看到内容，是浏览器控制台的引用读取特性：打印时保存的是数组的内存引用，后续数组更新后点击展开，控制台会读取引用对应的最新值，和打印当时的实际值并不一致。

解决方案 #

根据你的使用场景可以选择对应实现方式：

通用JS场景 #

方案1：所有依赖请求结果的逻辑放在then回调中

const baseURL = 'http://localhost:5000/api/user/timesheet/13009';
let y = [];

axios.get(baseURL).then((response)=>{
   for(let i in response.data){
    y.push(response.data[i]);
   }
   // 所有需要用到y的逻辑都写在回调内部
   console.log(y);
   console.log(y.length);
   console.log(y[0]);
});

如果response.data本身就是数组，可以不需要循环遍历，直接赋值y = [...response.data]即可。

方案2：用async/await语法简化异步逻辑

const baseURL = 'http://localhost:5000/api/user/timesheet/13009';

// 异步逻辑必须包裹在async函数中
const fetchData = async () => {
  let y = [];
  const response = await axios.get(baseURL);
  y = [...response.data];
  // await执行完成后再操作y即可拿到正确结果
  console.log(y);
  console.log(y.length);
  console.log(y[0]);
  return y;
}

fetchData();

React项目适配方案 #

你当前使用React开发，不要用普通变量存储请求结果，需要存入组件状态中才能触发页面重新渲染，示例实现如下：

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

const TimesheetPage = () => {
  // 用state存储请求结果
  const [dataList, setDataList] = useState([]);
  const baseURL = 'http://localhost:5000/api/user/timesheet/13009';

  useEffect(() => {
    // 组件挂载时发起请求
    const fetchTimesheet = async () => {
      try {
        const response = await axios.get(baseURL);
        setDataList(response.data);
      } catch (error) {
        console.error('请求工时数据失败：', error);
      }
    };
    fetchTimesheet();
  }, []);

  // 渲染时直接使用state即可，初始为空数组，请求完成后自动更新渲染
  return (
    <div>
      <p>数据总条数：{dataList.length}</p>
      {dataList.length > 0 && (
        <div>第一条数据内容：{JSON.stringify(dataList[0])}</div>
      )}
    </div>
  );
};

export default TimesheetPage;

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