使用Axios获取后端数据后无法赋值变量并导出的问题求助

嘿，我一眼就看出问题出在哪啦——异步操作的执行顺序！

你遇到的核心问题是：axios请求是异步的，而你的init函数并没有返回任何值，所以当你执行let obj = init()时，obj直接就变成了undefined。等到axios的请求完成、then回调里给obj赋值的时候，变量早已经被导出了，根本赶不上。

解决方案：让init返回Promise #

我们需要把异步请求的结果包装成Promise导出，这样在使用这个变量的地方，就能通过异步方式拿到真实的数据。

修改后的代码如下：

import axios from "axios";

function init() {
  // 直接返回axios请求的Promise
  return axios('/users')
    .then(response => {
      console.log(response.data);
      return response.data; // 把数据作为Promise的resolve值返回
    })
    .catch(error => {
      console.log("error fetching");
      return null; // 出错时返回null
    });
}

// 导出这个Promise
export default init();

如何使用导出的数据？ #

因为导出的是一个Promise，所以在其他文件里使用时，需要用.then或者async/await来处理：

// 假设你的文件名叫userData.js
import userData from './userData.js';

// 方式1：使用.then
userData.then(data => {
  console.log("拿到数据啦：", data);
  // 在这里写处理数据的逻辑
});

// 方式2：在async函数里用await
async function handleUserData() {
  const data = await userData;
  console.log("拿到数据啦：", data);
  // 处理逻辑
}
handleUserData();

用async/await改写init（更简洁的写法） #

如果你更喜欢async/await的语法，可以把init改成异步函数：

import axios from "axios";

async function init() {
  try {
    const response = await axios('/users');
    console.log(response.data);
    return response.data;
  } catch (error) {
    console.log("error fetching");
    return null;
  }
}

export default init();

这样代码逻辑更清晰，本质和返回Promise是一样的，因为async函数本身就会返回Promise。

为什么不能直接导出异步获取的值？因为ES模块的导出是静态的，在模块加载阶段就会确定导出的内容，这时候异步请求还没完成，根本拿不到数据，所以必须通过Promise来传递异步结果～

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