Vue项目中Promise Reject未触发组件catch块问题求助

问题场景 #

在Vuex Action中通过手动创建Promise处理登录请求，服务端返回错误时Action的catch块已执行reject()，但组件中调用dispatch后的catch块未触发，反而进入了then块。

Action代码 #

@Action
[Actions.LOGIN](credentials) {
  return new Promise<void>((resolve, reject) => {
    ApiService.post("auth/login", credentials)
      .then(({ data }) => {
        this.context.commit(Mutations.SET_AUTH, data);
        resolve();
      })
      .catch(({ response }) => {
        this.context.commit(Mutations.SET_ERROR, response.data.message);
        reject();
      });
  });
}

组件代码（sign.vue） #

store
  .dispatch(Actions.LOGIN, values)
  .then(() => {
    Swal.fire({
      text: "All is cool! Now you submit this form",
      icon: "success",
      buttonsStyling: false,
      confirmButtonText: "Ok, got it!",
      customClass: {
        confirmButton: "btn fw-bold btn-light-primary",
      },
    }).then(function () {
      // Go to page after successfully login
      router.push({ name: "dashboard" });
    });
  })
  .catch(() => {
    Swal.fire({
      text: store.getters.getErrors[0],
      icon: "error",
      buttonsStyling: false,
      confirmButtonText: "Try again!",
      customClass: {
        confirmButton: "btn fw-bold btn-light-danger",
      },
    });
  });

问题原因 #

1. Promise嵌套反模式：手动创建new Promise包裹已有Promise（ApiService.post返回的Promise）属于冗余操作，容易导致Promise状态处理异常。比如内部Promise链出现未预期错误时，外层Promise的状态可能不符合预期。
2. 不安全的错误解构：在catch块中直接解构{ response }，如果错误是网络异常等无response属性的情况，会抛出新错误，导致reject()无法执行，进而影响外层Promise的状态。
3. 错误传递中断：原Action的catch块仅调用reject()，但手动嵌套Promise的场景下，若内部代码出现异常，可能导致错误无法正确传递到上层。

解决方案 #

修正Action代码（移除冗余Promise嵌套） #

@Action
[Actions.LOGIN](credentials) {
  // 直接返回ApiService.post的Promise链，无需手动创建Promise
  return ApiService.post("auth/login", credentials)
    .then(({ data }) => {
      this.context.commit(Mutations.SET_AUTH, data);
    })
    .catch((error) => {
      // 安全获取错误信息，避免解构不存在的属性
      const errorMessage = error?.response?.data?.message || '登录失败，请重试';
      this.context.commit(Mutations.SET_ERROR, errorMessage);
      // 重新抛出错误，确保上层dispatch的catch能捕获到
      throw error;
    });
}

优化组件代码（可选，增加调试信息） #

store
  .dispatch(Actions.LOGIN, values)
  .then(() => {
    Swal.fire({
      text: "登录成功！即将跳转至首页",
      icon: "success",
      buttonsStyling: false,
      confirmButtonText: "好的！",
      customClass: {
        confirmButton: "btn fw-bold btn-light-primary",
      },
    }).then(() => {
      router.push({ name: "dashboard" });
    });
  })
  .catch((error) => {
    // 打印错误信息方便调试
    console.error('登录错误详情:', error);
    Swal.fire({
      text: store.getters.getErrors[0],
      icon: "error",
      buttonsStyling: false,
      confirmButtonText: "重试！",
      customClass: {
        confirmButton: "btn fw-bold btn-light-danger",
      },
    });
  });

说明 #

移除手动Promise嵌套后，Action直接返回ApiService.post的Promise链，错误会通过Promise链自动传递。在catch块中重新抛出错误，确保组件的catch块能正确捕获到登录失败的状态。同时，增加错误信息的安全获取逻辑，避免因错误结构异常导致代码中断。

内容的提问来源于stack exchange，提问作者Ömer Faruk Demirel