Vuex的wizard模块调用auth模块VERIFY_AUTH action不生效如何解决

核心问题点 #

• SPOUSES action中存在Promise反模式：ApiService.post本身已经返回Promise，无需额外手动包裹一层Promise；且手动创建的Promise没有调用resolve()/reject()，会永久处于pending状态，导致后续逻辑无法正常执行
• 跨模块dispatch auth/VERIFY_AUTH时没有返回该异步action的Promise，也没有做错误捕获，无法追踪执行状态
• VERIFY_AUTH作为async异步action，else分支没有返回统一的Promise结构，调用时可能出现预期外的返回值

代码修正 #

第一步：优化auth.module.js中的VERIFY_AUTH action #

async [VERIFY_AUTH](context) {
  if (JwtService.getToken()) {
    ApiService.setTokenAxios();
    // 直接返回axios请求的Promise，async会自动包装为Promise无需额外处理
    return ApiService.get("api/customer/me")
      .then(({ data }) => {
        console.log("auth request - user:", data);
        context.commit(SET_AUTH, data);
      })
      .catch(({ response }) => {
        console.log(response);
        context.commit(SET_ERROR, serviceErrors(response.data));
        // 建议抛出错误方便调用端捕获，不需要可以去掉
        return Promise.reject(response)
      })
  } else {
    context.commit(PURGE_AUTH);
    // 统一返回Promise保证调用逻辑一致
    return Promise.resolve()
  }
}

第二步：重写wizard.modules.js中的SPOUSES action #

去掉多余的手动Promise包装，返回完整的异步调用链，两种写法任选其一即可：

async/await写法（更易读）

async [SPOUSES](context, data) {
  console.log(data);
  try {
    const res = await ApiService.post(`api/customer/${data.id}/spouses`, data.form)
    console.log(res.data)
    // 返回dispatch的结果，方便调用端继续链式调用或await
    return context.dispatch("auth/VERIFY_AUTH", null, { root: true })
  } catch (err) {
    // 按需添加错误处理逻辑，比如提交错误到state
    console.error('SPOUSES action error:', err)
    return Promise.reject(err)
  }
}

then链式写法

[SPOUSES](context, data) {
  console.log(data);
  // 直接返回ApiService.post的Promise链即可
  return ApiService.post(`api/customer/${data.id}/spouses`, data.form)
    .then(({ data }) => {
      console.log(data);
      return context.dispatch("auth/VERIFY_AUTH", null, { root: true });
    })
    .catch(err => {
      console.error('SPOUSES action error:', err)
      return Promise.reject(err)
    })
}

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