Rxjs中throw语句无法被管道catchError捕获的问题排查

嘿，这个问题我之前也踩过坑！核心原因很简单：你在手动构建Observable时，没有通过Observable的错误通知机制传递错误，而是直接在Promise的catch回调里throw——这种错误只会在Promise的上下文里抛出，根本进入不了RxJS的错误流，所以pipe里的catchError自然抓不到它。

为什么会这样？ #

当你手动创建Observable的时候，必须通过observer.error(err)方法来告诉Observable“出问题了”，这样错误才会进入Observable的错误通道，后续的操作符才能捕获到。你现在的写法里，throw new Error('crap')只是在Promise的异步回调里抛出了一个同步错误，这个错误和Observable的生命周期完全脱节，Observable根本不知道发生了错误，自然不会触发下游的catchError。

修正后的代码 #

把throw换成observer.error()就行：

authenticate(credentials: { username: string; password: string }){ 
  return new Observable<any>((observer: Observer<any>) => { 
    // ... 调用服务，获取Promise 
    const authenticationPromise = ... ; 

    authenticationPromise 
      .then(() => { 
        observer.next('ok'); 
        observer.complete(); 
      }) 
      .catch(err => { 
        console.log('service error ' + err); 
        // 关键：用observer.error把错误传入Observable流
        observer.error(new Error('crap')); 
      }); 
  }); 
}

更优雅的写法（推荐） #

其实RxJS早就帮我们做好了Promise转Observable的工具，完全没必要手动写Observable创建逻辑，用from操作符一行就能搞定，还不容易出错：

import { from } from 'rxjs';
import { map } from 'rxjs/operators';

authenticate(credentials: { username: string; password: string }) {
  const authenticationPromise = ... ;
  // from会自动把Promise的成功值转为next事件，错误转为error事件
  return from(authenticationPromise).pipe(
    map(() => 'ok')
  );
}

这样修改后，Promise的错误会自动被RxJS捕获并转为Observable的错误事件，你调用方pipe里的catchError就能正常打印错误并返回LoginFailureAction了。

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