如何在 Rxjs Angular 中订阅可观察对象 function 时处理错误并返回可观察对象

Question

我想在一个可观察对象中检查一个 api 调用，我将在一个组件中订阅它。 如下所述，我想以这种方式运行我的可观察对象，但它不起作用。 我应该对此代码做哪些更改才能使其正常工作。 每当我尝试通过它进行订阅时，尤其是在 someObservableWrittenInTheSameService 返回错误 404 的情况下，我都想返回 url2。

getfunction(submissionId: string ){

if (some condition) {
   this.someObservableWrittenInTheSameService(parameter).subscribe(
    (httpValue: any) => {
      let url = '';
      if (httpValue.code === 200) {
         return this.http.get(url1); 
      }
    }, err => {
      if (err.code === 404) {
        return this.http.get(url2);
      }
      
    }
  )
}

  let url3
  return this.http.get(url3);
}

然后在订阅它的组件中调用此 function。 但是每当 someObservableWrittenInTheSameService 返回 404 时，订阅总是失败并且 go 到组件中的错误块。

Answer 1

1. 您可以使用 RxJS iif function 有条件地返回一个可观察对象。
2. 使用 RxJS 高阶映射运算符switchMap到 map 从一个可观察到另一个。 更多信息在这里。
3. 使用catchError运算符执行错误处理。 从它的正文中，您可以返回 HTTP 请求或转发错误（使用throwError ），甚至可以根据您的要求完成可观察的（使用EMPTY常量）。

尝试以下

import { Observable, EMPTY, iif, throwError } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';

getfunction(submissionId: string): Observable<any> {      // <-- observable must be returned here
  const obs1$ = this.someObservableWrittenInTheSameService(parameter).pipe(
    switchMap((httpValue: any) => 
      iif(
        () => httpValue.code === 200,
        this.http.get(url1),
        EMPTY                                             // <-- complete the observable if code is other than 200
      )
    ),
    catchError((error: any) =>                            // <-- `catchError` operator *must* return an observable
      iif(
        () => error.code === 404,
        this.http.get(url2),
        throwError(error)                                 // <-- you could also return `EMPTY` to complete the observable
      )
  )

  const obs2$ = this.http.get(url3);

  return iif(
    () => someCondition,
    obs1$,
    obs2$
  );
}

在这种情况下，您将订阅使用它的getFunction() function。

例如。

this.getFunction('some value').subscribe({
  next: (value: any) => { },
  error: (error: any) => { },
  complete: () => { }
});