如何在JavaScript函数中使用Axios且避免全局变量？

嘿，这个问题我太懂了！之前也踩过类似的坑——异步请求的结果总靠全局变量存，代码写得乱糟糟的。其实咱们完全可以通过Promise链式调用或者async/await语法来解决，彻底告别全局变量，让代码更整洁、更易维护。

为什么内部变量拿不到结果？ #

先给你捋清楚根源：Axios的get请求是异步操作——函数getTimeData会先执行完，而请求还在后台跑，等请求完成时函数早就执行结束了，所以内部变量根本没来得及被赋值。全局变量能拿到是因为它的作用域大，等请求的then回调触发时还能修改它，但这种做法很容易导致变量污染，逻辑也容易混乱。

解决方案1：让函数返回Promise，用链式调用处理结果 #

Axios本身返回的就是一个Promise对象，所以咱们直接把这个Promise返回出去，在调用函数的时候通过.then来获取结果就行：

function getTimeData() {
  // 直接返回Axios的请求Promise
  return axios.get('/time')
    .then(function (response) {
      console.log('请求成功，响应数据:', response.data);
      // 可以在这里先处理数据，比如提取需要的字段
      return response.data; // 返回处理后的数据，供后续调用使用
    })
    .catch(function (error) {
      console.error('请求出错啦:', error);
      throw error; // 抛出错误，让调用方可以捕获处理
    });
}

// 调用函数，直接在.then里拿到结果，不需要全局变量
getTimeData()
  .then(function(data) {
    // 这里的data就是后端返回的数据，直接用就行
    console.log('拿到数据啦，可以开始处理:', data);
    // 把你原本要用myresponse做的逻辑放在这里
  })
  .catch(function(err) {
    // 处理请求失败的情况
  });

解决方案2：用async/await让代码更像同步逻辑 #

如果觉得链式调用看着麻烦，还可以用ES6的async/await语法糖，让异步代码的逻辑更清晰，写起来像同步代码一样：

// 把函数标记为async，这样内部就能用await了
async function getTimeData() {
  try {
    // 用await等待请求完成，拿到响应
    const response = await axios.get('/time');
    console.log('请求成功，响应数据:', response.data);
    return response.data; // 返回处理后的数据
  } catch (error) {
    console.error('请求出错啦:', error);
    throw error; // 抛出错误，让调用方处理
  }
}

// 调用的时候，需要在async函数里使用await
async function handleTimeData() {
  try {
    const data = await getTimeData();
    // 这里直接使用data，完全不需要全局变量
    console.log('拿到数据啦:', data);
    // 在这里处理业务逻辑
  } catch (err) {
    // 处理请求失败的情况
  }
}

// 执行处理函数
handleTimeData();

这两种方法都能完美避免全局变量的使用，而且代码逻辑更清晰，也符合现代JavaScript异步编程的最佳实践哦～

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