await返回Promise的axios请求方法未阻塞后续代码执行怎么办

你遇到的await未按预期等待接口请求完成的问题，基本是以下几个常见错误导致的，按优先级排查：

• 调用方式错误：你贴出的myMethod里直接写了await checkData()，但checkData是组件实例上的方法，正确调用必须加this写成await this.checkData()。如果直接调用裸的checkData，要么触发引用错误，要么调用到了其他同名同步方法，根本不会走你写的axios请求逻辑，后续代码自然会直接同步执行。
• Promise链断裂：这是链式调用Promise最容易踩的坑。如果你在.then/.catch回调里写了额外的异步逻辑，但没有将对应的Promise返回，外层拿到的Promise会在当前回调的同步代码执行完就直接落定，不会等待内部的异步操作。错误示例：

checkData() {
   return this.$axios.get(url)
      .then(result => {
        // 比如这里写了第二个接口请求、或者其他异步操作，但是没加return
        this.$axios.get('/other-api') // 缺少return，外层不会等这个请求
        // 要是写了setTimeout之类的异步没做Promise包装，也不会等
      })
      .catch(() => {
        // 如果catch里只打日志不返回/抛出错误，也会让Promise链直接进入resolved状态
        console.log('请求出错')
      })
}

• 拦截器异常：检查项目里的axios全局请求/响应拦截器，如果拦截器里存在提前返回非Promise值、异步逻辑未return的情况，会直接打破整个Promise链，导致外层await提前结束。

推荐修复写法 #

直接用async/await改写checkData，从根源上避免链式调用的断链问题，逻辑更直观：

async checkData() {
  try {
    const result = await this.$axios.get(url)
    // 原来写在.then里的逻辑放这，有额外异步请求记得前面加await
    // 例：await this.loadOtherConfig()
    return result
  } catch (err) {
    // 原来写在.catch里的错误处理逻辑放这
    console.error('请求失败', err)
    // 如果需要请求失败时阻断myMethod里的后续代码，一定要把错误抛出去
    throw err
  }
}

// 调用时注意this指向
async myMethod() {
    await this.checkData()
    // 后续逻辑会在checkData所有逻辑执行完成后才运行
}

提示：如果你在catch分支里没有抛出错误，那么不管接口请求成功还是失败，await之后的代码都会执行，这是Promise的正常表现，如果需要请求失败就终止后续流程，不要在catch里静默吞错。

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