Promise链未触发resolve问题排查：Vue组件Promise调用异常

嘿，我一眼就看出问题出在哪了！你的ResolveApiResponse函数在使用Promise的时候踩了个常见的小坑。

问题根源 #

你在new Promise()的执行器函数里，没有调用传入的resolve或reject来完成这个Promise的状态变更，反而直接返回了Promise.reject()或者Promise.resolve()。这会导致你创建的这个外层Promise一直处于**pending（等待）**状态——它根本不知道要怎么结束，所以调用方的.then和.catch自然永远不会触发。

看一下你原来的错误代码：

private static ResolveApiResponse(response: any): Promise<any> {
  return new Promise((resolve) => {
    if (response.errors != undefined && response.errors.length > 0) {
      return Promise.reject(response.errors); // 这里返回Promise不会决议外层的Promise
    }
    return Promise.resolve(response.Data); // 同样，返回Promise没用，外层Promise还在等
  });
}

修复方案 #

正确的做法是直接使用new Promise执行器里传入的resolve和reject函数来改变Promise的状态，而不是返回新的Promise。你给出的修复代码已经接近正确了，不过这里要补充一点：如果是错误场景，应该用reject而不是resolve，这样才能让调用方的.catch捕获到错误。

修复后的正确代码应该是这样：

private static ResolveApiResponse(response: any): Promise<any> {
  return new Promise((resolve, reject) => {
    if (response.errors != undefined && response.errors.length > 0) {
      reject(response.errors); // 错误场景调用reject，让Promise进入rejected状态
    } else {
      resolve(response.Data); // 成功场景调用resolve，让Promise进入resolved状态
    }
  });
}

为什么这样就好了？ #

当你调用resolve()或者reject()时，你明确告诉了这个新创建的Promise它的最终状态是成功还是失败，这样Promise链就能正常往下走了——你的mounted钩子函数里的.then就能接收到返回的数据，触发alert('done')，.catch也能正常捕获错误了。

另外，其实你还可以简化这个函数，没必要手动创建Promise，直接返回Promise.resolve()或者Promise.reject()就行，这样更简洁：

private static ResolveApiResponse(response: any): Promise<any> {
  if (response.errors != undefined && response.errors.length > 0) {
    return Promise.reject(response.errors);
  }
  return Promise.resolve(response.Data);
}

这样写的效果和上面的new Promise写法是一样的，而且更易读。

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