Typescript 使用RXJS获取数据的3种不同REST API

发布于10月29日

我正在try 实现一个httpService，其中我们有3个Rest API端点.如果第一个API返回成功代码，那么我不想调用下一个端点，但如果出现错误，我想try 第二个或第三个端点. 我写的代码就像

从‘rxjs’导入{of，throwError}；从‘rxjs/OPERATOR’导入{catchError，mergeMap}；

this.httpService
  .post(`${primary_system}?id=${params.id}`)
  .pipe(
    catchError((primaryError) => {
      if (!!secondary_system) {
        return this.httpService
          .post(`${secondary_system}?id=${params.id}`)
          .pipe(
            catchError((secondaryError) => {
              if (!!tertiary_system) {
                return this.httpService.post(`${tertiary_system}?id=${params.id}`);
              }
              return of(secondaryError);
            })
          );
      }
      return of(primaryError);
    })
  );

当然，这将是扁平化这些嵌套调用的一种方式.我认为这是一种不好的做法，不能像这样管可观测到的东西.还有更好的解决方案吗？

推荐答案

您不需要将第二个catchError嵌入到第一个catchError的闭合中.

换句话说，你可以做这样的事情

this.httpService
  .post(`${primary_system}?id=${params.id}`)
  .pipe(
    catchError((primaryError) => {
      if (!!secondary_system) {
        return this.httpService
          .post(`${secondary_system}?id=${params.id}`)
          );
      }
      return of(primaryError);
    }),
    // here you catch an error that is generated by the call to the
    // secondary system
    catchError((secondaryError) => {
      if (!!tertiary_system) {
         return this.httpService.post(`${tertiary_system}?id=${params.id}`);
      }
      return of(secondaryError);
    })
  );

您还可以通过引入2个函数来表示对第二和第三系统的调用，从而使代码更具可读性，如下所示

// this function returns an Observable that represents the call to the
// secondary system if it catches an error coming from upstream
function callSecondIfFirstFail(id: any) {
   return pipe(
      catchError((primaryError) => {
        if (!!secondary_system) {
          return this.httpService.post(`${secondary_system}?id=${id}`));
        }
        return of(primaryError);
      }),
   )
}

// this function returns an Observable that represents the call to the
// tertiary system if it catches an error coming from upstream
function callThirdIfSecondFail(id: any) {
   return pipe(
      catchError((secondaryError) => {
        if (!!tertiary_system) {
          return this.httpService.post(`${tertiary_system}?id=${id}`));
        }
        return of(secondaryError);
      }),
   )
}

// this is then how the code that performs the, possible, three calls
// would look like
this.httpService
  .post(`${primary_system}?id=${params.id}`).pipe(
     callSecondIfFirstFail(params.id),
     callThirdIfSecondFail(params.id)
  )

这stackblitz个试图代表这个 idea .