Vuex Store如何等待被调用的action执行完成再运行后续代码

Vuex 中dispatch调用async类型的action时，本身会返回对应Promise对象，只需要在dispatch调用前添加await关键字，即可实现等待子action内部所有逻辑执行完成后，再继续运行主action后续代码。

核心注意事项 #

• 被调用的async action无论是否显式写return返回值，内部所有同步逻辑、被await标记的异步逻辑全部执行完成后，才会将返回的Promise标记为完成状态，await会正确捕获这个完成时机
• 如果子action内部存在嵌套异步逻辑（接口请求、其他action调用、文件读取等），必须给这些异步逻辑也加上await，否则会出现子action内部逻辑未跑完就提前回到主action流程的问题
• 如果子action内存在setTimeout这类默认不返回Promise的异步操作，需要手动将其包装为Promise并await，才能保证等待逻辑生效

修正后示例代码 #

export const actions = {
  // 主逻辑代码块
  async mainCodeBlock(vuexContext, someData) {
    // 加await等待子action完全执行完毕
    await vuexContext.dispatch("theCodeThatMustFinishBeforeTheMainCodeResumes")
    // 以下代码会在子action全部执行完成后才运行
    // ... 后续业务逻辑
  },

  // 需要提前执行完成的子action
  async theCodeThatMustFinishBeforeTheMainCodeResumes(vuexContext) {
    // 内部所有异步操作都需要加await保证执行顺序
    // 例：await vuexContext.dispatch('其他依赖action')
    // 例：await fetch('/api/xxx')
    // 无需强制写返回值，不影响等待逻辑
  }
}

非Promise异步的适配示例 #

如果子action包含定时器这类原生不返回Promise的逻辑，可以按如下方式包装，保证等待逻辑正常：

async theCodeThatMustFinishBeforeTheMainCodeResumes(vuexContext) {
  // 将setTimeout包装为Promise
  await new Promise(resolve => {
    setTimeout(() => {
      // 定时器内业务逻辑执行完成后再resolve
      // ... 定时器相关逻辑
      resolve()
    }, 2000)
  })
}

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