Angular Ionic中finalizer.unsubscribe不是函数的API请求问题求助

问题根源 #

报错的核心原因是：你在Observable.create中传入了async类型的回调函数。async函数执行后默认会返回一个Promise对象，而RxJS会将这个Promise当作订阅清理函数（finalizer），尝试调用它的unsubscribe方法——但Promise并没有这个方法，因此抛出类型错误。

解决方案 #

推荐采用以下两种规范的写法来修复问题：

方案1：用RxJS原生操作符替代Observable.create（更推荐）

由于convertNativeImagesToBase64返回的是Promise，RxJS可以直接将其转为Observable，无需手动创建。将异步逻辑移到mergeMap中处理：

return from(this.convertNativeImagesToBase64(isMobile)).pipe(
  mergeMap(() => {
    return this.apiService.sendIssue(payload).pipe(
      map((response: any) => response)
    );
  }),
  catchError((error) => {
    const errorMessage = this.getErrorMessage(error, "Failed.");
    const failed: any = { Success: false, Message: errorMessage };
    return throwError(() => failed); // RxJS 6+推荐传入错误工厂函数
  })
);

方案2：保留Observable.create但修正回调写法

如果必须使用Observable.create，不要让回调本身是async，而是在内部用立即执行函数处理异步逻辑，同时返回一个有效的清理函数（无清理需求时返回空函数即可）：

return Observable.create((observer) => {
  // 内部封装async逻辑，避免回调本身返回Promise
  (async () => {
    try {
      const result = await this.convertNativeImagesToBase64(isMobile);
      observer.next(result);
      observer.complete();
    } catch (err) {
      observer.error(err);
    }
  })();

  // 返回空清理函数，满足RxJS对回调返回值的要求
  return () => {};
}).pipe(
  mergeMap(() => {
    return this.apiService.sendIssue(payload).pipe(
      map((response: any) => response)
    );
  }),
  catchError((error) => {
    const errorMessage = this.getErrorMessage(error, "Failed.");
    const failed: any = { Success: false, Message: errorMessage };
    return throwError(() => failed);
  })
);

额外注意 #

• RxJS 6及以上版本中，throwError建议传入错误工厂函数（而非直接传错误对象），这是官方推荐的最佳实践，能避免一些潜在的状态共享问题。
• 尽量避免手动使用Observable.create，RxJS提供了from、defer等操作符来处理异步逻辑，代码更简洁且不易出错。

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