RxJs zip 运算符，检查哪个抛出错误并在条件下继续？

Question

我将 2 个 api 服务调用压缩到一个 observable 中：

const firstAPIrequest = this.firstApi.getData();
const secondAPIrequest = this.secondApi.getData();

const combined = zip(firstAPIrequest, secondAPIrequest);

我目前映射这些以返回一个数组：

combined.pipe(
   map((res) => {
      return [res[0], res[1]) // just an example
   }
);

然后我将它用作不同组件中的订阅

combined.subscribe(
   (res) => this.handleData(res),
   (err) => {
      console.debug('Fetch failed', err);
   }
)

在这种情况下，如果其中一个 API 请求失败，它会显示错误，但我想检查其中一个失败，例如；如果request1 返回数据并且request2 失败，我仍然会从request1 返回数据

我尝试过catchError，但我认为我无法获取此函数中的数据

combined.pipe(
   catchError((err) => ...), // how would I catch the data before it throws an error?
   map((res) => {
      return [res[0], res[1]) // just an example
   }
);

Answer 1

您必须在两个来源上都捕获错误，因为如果您在组合后捕获错误，则组合流会在第一个错误后停止。例如：

const replaceErrorWithNull = catchError(() => of(null));

const firstAPIrequest = this.firstApi.getData();
const secondAPIrequest = this.secondApi.getData();

const combined = zip(
  firstAPIrequest.pipe(replaceErrorWithNull), 
  secondAPIrequest.pipe(replaceErrorWithNull)
);

使用这种方法，null 将代替 API 中出错的数据

Answer 2

要单独处理来自每个源的错误，catchError 必须单独通过管道传递到每个源。 catchError 必须返回一个 observable，所以我们将使用 RxJS of 函数。

import { of, catchError } from 'rxjs';

const handleError = (error: any) => of({error: error});

const firstAPIrequest = this.firstApi.getData().pipe(
  catchError(this.handleError)
);
const secondAPIrequest = this.secondApi.getData().pipe(
  catchError(this.handleError)
);

const combined = zip(firstAPIrequest, secondAPIrequest);

现在在订阅中，您可以检查响应是有效还是错误。

combined.subscribe(
  ([res1, res2]) => {
    if (!!res1.error && !!res2.error) {
      // both API calls threw error
    } else if (!!res1.error) {
      // `firstAPIrequest` threw error
    } else if (!!res2.error) {
      // `secondAPIrequest` threw error
    } else {
      // both returned responses
    }
  }
);

注意：这假定实际响应不包含属性error。如果是这样，请将 handleError 函数中的 error 属性替换为其他内容。