使用 Fetch 捕获 Rxjs Epic 中的 Http 响应错误

Question

在 React 中，我需要检查 HTTP 错误响应对象（例如，400 错误请求有一个子对象，其中包含每个失败的验证消息），但使用 catchError 的常规方法不允许这样做，因为 Error 是一个不同的对象并且错误在到达地图之前抛出（（响应），因此它也无法在与正常响应相同的位置进行处理。所以看来您需要在开始时访问http错误，但语法是不是很明显。您可以在代码中看到我的一些尝试注释。我现在确定如何在该阶段拦截错误，但然后让 map((response) 行在错误之后正确继续。有人有想法吗？很多谢谢。

  action$.pipe(
    ofType(DataActionEnum.Fetch_Data),
    withLatestFrom(state$),
    mergeMap(([action, state]: [IFetchDataAction, IApplicationState]) => {
      return DataAPIClient.get<any>(`Position?assets=${action.asset}`).pipe(
        //catchError((err: any, caught: any) => {
        //  if (err.code === 400) {
        //    return of(FetchDataFailureAction("x"), sendToast("Test", ToastType.Error));
        //  }
        //}),
        // map((res: any) => {
        //   if (res.ok) return res.json();
        //   const x = res.status;
        //   throw res;
        // }),
        map((response) => {
          if (response.status === 400) {
            const error = response.data;
            return of(FetchDataFailureAction(error), sendToast(error, ToastType.Error));
          }
          const data = response.data;
          return FetchDataSuccessAction(data);
        }),
        catchError((x: any) => {
          const error = "API Issue - " + x.message;
          return of(FetchDataFailureAction(x.message), sendToast(error, ToastType.Error));
        })
      );
    })
  );```

Answer 1

考虑在这里花一些时间：https://www.learnrxjs.io/learn-rxjs/operators/error_handling/catch

我认为您的用例类似于“示例 2：捕获被拒绝的承诺”