使用Axios获取的数据无法存入全局变量的问题求助

我编写了一个使用Axios从reqres.in获取用户数据的函数，在函数内部用console.log可以正常查看数据，但无法将数据存入全局变量。以下是我的代码：

import "./style.css";
import axios from "axios";
let currentPage = 1;
let users = [];

// ***** Get Users from the Spisific Page *****
const getUsers = function (pageNumber) {
  const url = `https://reqres.in/api/users`;
  axios.get(url, { params: { pageNumber } }).then((res) => {
    for (let i = 0; i < res.data.data.length; i++) {
      users.push(res.data.data[i]);
    }
  });
};

问题根源及修复步骤 #

• 参数名错误：reqres.in的分页参数是page，不是你写的pageNumber，这个错误会导致请求无法正确获取对应页码的用户数据，先把参数名修正。
• 异步操作时机问题：Axios请求是异步的，then回调里的代码会在请求成功后才执行。如果你在调用getUsers()之后立刻访问users全局变量，此时请求还没完成，自然看不到填充后的数据。

修复后的代码示例（两种常用方式）

方式1：用async/await让请求同步化

import "./style.css";
import axios from "axios";
let currentPage = 1;
let users = [];

// 获取指定页码用户数据
const getUsers = async function (pageNumber) {
  const url = `https://reqres.in/api/users`;
  // 修正参数名为page
  const res = await axios.get(url, { params: { page: pageNumber } });
  // 用扩展运算符替代循环push，代码更简洁
  users.push(...res.data.data);
};

// 调用时需用await等待请求完成
async function init() {
  await getUsers(1);
  // 这里就能拿到填充后的users数据
  console.log(users);
}

init();

方式2：返回Promise，让调用者处理后续逻辑

import "./style.css";
import axios from "axios";
let currentPage = 1;
let users = [];

const getUsers = function (pageNumber) {
  const url = `https://reqres.in/api/users`;
  // 返回axios的Promise实例
  return axios.get(url, { params: { page: pageNumber } }).then((res) => {
    users.push(...res.data.data);
    // 可以返回更新后的users给调用者
    return users;
  });
};

// 调用示例：在then回调里操作已填充的users
getUsers(1).then(() => {
  console.log(users);
});

额外优化提示

如果需要多次调用getUsers加载多页数据，可以根据用户id做去重处理，避免重复添加相同用户。

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