async/await配合try/catch封装Axios请求返回Promise而非数据如何解决

问题原因 #

• JavaScript 语法规定所有 async 函数的返回值都会被自动包装为 Promise 对象，你在函数内部用 await 拿到的是异步请求的结果，但函数本身的返回值本质还是 Promise 类型，属于正常的语法表现，不是代码错误。
• 你在函数内部打印能拿到数据，是因为 await 已经等待异步请求执行完成后才执行的打印逻辑，而直接调用函数时没有等待异步流程执行完成，拿到的自然是处于 pending 状态的 Promise 对象。

解决方法 #

有两种通用实现方案可选：

方案1：调用时添加 await 关键字 #

将调用 fetchCoordinatesFromAdress 的外层函数也声明为 async 类型，调用方法前加 await 即可直接拿到实际返回数据，示例代码：

// 外层函数添加async声明
const handleAddressQuery = async (address: string) => {
  const coordinates = await fetchCoordinatesFromAdress(address)
  // 此处的coordinates就是你需要的response.data实际数据
  console.log(coordinates)
}

方案2：通过 .then() 回调接收数据 #

如果不方便修改外层函数为 async 类型，可以直接用 Promise 原生的 then 方法获取异步返回结果：

fetchCoordinatesFromAdress('待查询的地址')
  .then(coordinates => {
    // 回调函数内部可以拿到实际返回数据
    console.log(coordinates)
  })
  .catch(err => {
    // 可在这里统一处理请求异常逻辑
    console.warn('地址查询失败', err)
  })

优化提示：你当前的封装代码如果请求异常进入catch分支，response还是初始的空对象，此时返回 response.data 会得到undefined，建议在catch分支返回兜底的空坐标数据，或者抛出错误方便上层调用时感知异常。

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