Angular 14调用Promise函数出现Uncaught in promise错误求助

我编写了如下createVersion函数：

createVersion(data: any): Promise<any> {
  return new Promise((resolve, reject) => {
    this._httpClient
      .post(`${environment.apiUrl}/v1.0/versions`, data, {
        observe: "response",
      })
      .subscribe((response: any) => {
        resolve(response);
      }, reject);
  });
}

调用该函数时：

this._versionAddService.createVersion(args).then((result) => {})

出现错误：

core.mjs:7640 ERROR Error: Uncaught (in promise): OK
at resolvePromise (zone.js:1213:31)
at resolvePromise (zone.js:1167:17)
at zone.js:1279:17
at ZoneDelegate.invokeTask (zone.js:406:31)
at Object.onInvokeTask (core.mjs:26363:33)
at ZoneDelegate.invokeTask (zone.js:405:60)
at Zone.runTask (zone.js:178:47)
at drainMicroTaskQueue (zone.js:582:35)
at ZoneTask.invokeTask [as invoke] (zone.js:491:21)
at invokeTask (zone.js:1600:14)

错误原因 #

错误核心是手动封装Promise的方式存在问题：直接将reject作为subscribe的错误回调，可能在非预期场景下触发reject，比如响应解析异常或者状态码判断缺失，导致reject被传入"OK"这类不符合错误规范的值，进而抛出未捕获的Promise错误。

解决方案 #

方案1：修正手动Promise封装逻辑

如果坚持手动封装，需明确区分请求成功与失败的场景，避免误触发reject：

createVersion(data: any): Promise<any> {
  return new Promise((resolve, reject) => {
    this._httpClient
      .post(`${environment.apiUrl}/v1.0/versions`, data, {
        observe: "response",
      })
      .subscribe({
        next: (response) => {
          // 校验HTTP状态码是否处于成功范围
          if (response.status >= 200 && response.status < 300) {
            resolve(response);
          } else {
            reject(new Error(`请求失败，状态码：${response.status}`));
          }
        },
        error: (err) => {
          // 处理HTTP请求层面的错误（如4xx/5xx状态码、网络错误）
          reject(err);
        }
      });
  });
}

方案2：使用RxJS官方方法转换Observable为Promise（推荐）

从RxJS 7开始，toPromise()已被废弃，推荐使用firstValueFrom或lastValueFrom，无需手动封装Promise，减少出错概率：

import { firstValueFrom } from 'rxjs';

createVersion(data: any): Promise<any> {
  const request$ = this._httpClient
    .post(`${environment.apiUrl}/v1.0/versions`, data, {
      observe: "response",
    });
  return firstValueFrom(request$);
}

若使用RxJS 6及更早版本，可使用toPromise()：

createVersion(data: any): Promise<any> {
  return this._httpClient
    .post(`${environment.apiUrl}/v1.0/versions`, data, {
      observe: "response",
    })
    .toPromise();
}

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