Vue使用Axios调用API时后续函数提前于接口响应执行问题

AI 小北

2026-8-30

问题产生原因

await 关键字的生效前提是，等待的目标是一个Promise对象；如果等待的目标是普通同步值（比如undefined），会直接同步执行后续代码，不会等待任何异步操作。

你当前的组件层写法没有问题，问题出在Vuex store中functionCall模块下定义的functionName action，没有将Axios请求对应的Promise对象返回：调用通过mapActions映射的方法时，拿到的不是请求的Promise实例，await相当于等待了一个无意义的同步返回值，自然会在接口响应前就直接执行test()方法。

常见的错误action写法示例：

// store/functionCall模块 错误写法
const actions = {
  functionName({ commit }) {
    // 没有return axios调用，Promise被锁在action内部没有抛出
    axios.get('/your/api/path').then(res => {
      commit('updateData', res.data)
    })
  }
}

修复方法

只需要修改store中对应action的写法，保证action最终返回Axios请求对应的Promise即可，组件层的现有代码不需要改动。有两种常见的正确写法：

写法1：手动return Axios调用的Promise实例

const actions = {
  functionName({ commit }) {
    // 加return 把axios生成的Promise抛给调用方
    return axios.get('/your/api/path').then(res => {
      commit('updateData', res.data)
      return res.data
    })
  }
}

写法2：将action声明为async函数，内部用await等待请求，async函数会自动返回Promise实例

const actions = {
  async functionName({ commit }) {
    const res = await axios.get('/your/api/path')
    commit('updateData', res.data)
    return res.data
  }
}

修改完成后，组件中await this.functionName()就会等待接口请求完成、store状态更新完毕后，才会执行后续的test()方法，符合预期逻辑。