如何在Vue.js中实现类Promise.all的Action调度及串行异常处理？

原代码问题分析 #

原代码存在两个核心问题：

• verifyToken的异步操作失败时，错误无法被外层catch捕获，导致该场景下不会跳转至登录页
• 嵌套式的then写法可读性差，且容易出现错误捕获遗漏

解决方案1：使用async/await（推荐） #

利用async/await将异步代码同步化，配合try/catch统一捕获所有错误，代码逻辑更清晰：

async verify() {
  try {
    // 第一步：执行set操作，等待完成
    await this.$store.dispatch('set', { key: this.value });
    // 第二步：执行verifyToken操作，等待完成
    await this.$store.dispatch('verifyToken', { id: this.$store.state.token });
    // 全部成功：跳转首页
    this.$router.push('/');
  } catch () {
    // 任意一步失败：跳转登录页
    this.$router.push('/login');
  }
}

关键说明

• await会确保前一个异步操作完成后，再执行下一行代码，严格保证执行顺序
• try块内任意一个await的Promise变为rejected状态，都会直接进入catch块，实现统一的失败处理

解决方案2：使用Promise链式调用 #

如果更习惯Promise写法，可调整为链式调用，确保所有错误被最后一个catch捕获：

async verify() {
  this.$store.dispatch('set', { key: this.value })
    // 执行完set后，返回verifyToken的Promise，进入链式调用
    .then(() => this.$store.dispatch('verifyToken', { id: this.$store.state.token }))
    // 全部成功：跳转首页
    .then(() => this.$router.push('/'))
    // 任意一步失败：跳转登录页
    .catch(() => this.$router.push('/login'));
}

关键说明

• 必须将verifyToken的Promise返回，才能让它进入链式调用的错误捕获链
• 最后一个catch会捕获链式调用中所有Promise的失败，避免原代码的错误遗漏问题

注意事项 #

• 确保Vuex中的set和verifyTokenaction在执行失败时，会返回rejected状态的Promise（比如通过throw new Error()或return Promise.reject()实现），否则catch块无法触发
• 如果set操作会更新this.$store.state.token，当前代码的顺序是正确的，因为await或链式then都会确保set执行完成后再获取token

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