如何在Axios外部使用异步请求返回的数据？

我明白你的困扰啦——axios请求返回的总是Promise，怎么都拿不到实实在在的城市数据对吧？这其实是JavaScript异步特性在搞鬼，咱们一步步理清楚：

为什么你的代码拿不到数据？ #

不管是第一种把axios.get()直接赋值给变量的写法，还是第二种在then里给suggestions赋值的写法，核心问题都是：axios的请求是异步的，代码不会等请求完成再往下走。

• 第一种写法里，cities被赋值的是axios返回的Promise对象，而不是请求成功后的数据，因为then链式调用后返回的依然是Promise。
• 第二种写法里，虽然你在then里给suggestions赋值了，但如果在then外部去访问suggestions，请求大概率还没完成，这时候suggestions还是初始的undefined。

两种可行的解决方案 #

方案1：用async/await（推荐，写法更像同步代码）

把请求逻辑放在一个async函数里，用await等待Promise完成，这样就能直接拿到返回的数据：

// 声明一个async函数
async function getCitiesData() {
  try {
    // await会等待axios请求完成，拿到实际的响应对象
    const response = await axios.get('/get/cities');
    // 这里直接把数据赋值给suggestions
    suggestions = response.data.cities;
    // 接下来就可以正常使用suggestions了
    console.log('拿到的城市数据：', suggestions);
    // 比如把数据渲染到页面之类的操作都可以放在这里
  } catch (error) {
    console.log('请求出错啦：', error);
  }
}

// 调用这个函数触发请求
getCitiesData();

⚠️ 注意：await只能在async标记的函数内部使用哦。

方案2：在then回调里处理所有依赖数据的逻辑

如果不想用async/await，那所有需要用到suggestions的代码都得放在then回调里面，因为只有当请求成功后，then里的代码才会执行，这时候数据才是有效的：

axios.get('/get/cities')
  .then((response) => {
    suggestions = response.data.cities;
    // 这里写所有需要用suggestions的逻辑
    console.log('拿到的城市数据：', suggestions);
    renderCitySuggestions(suggestions); // 比如调用渲染函数
  })
  .catch(error => console.log('请求出错啦：', error));

// 专门处理数据的函数
function renderCitySuggestions(cities) {
  // 在这里用数据做你需要的操作，比如生成下拉选项
  cities.forEach(city => {
    console.log('城市：', city);
  });
}

这样就能确保你拿到的是真实的请求数据，而不是Promise对象啦～

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