在 Angular 8 中使用管道和 Http 服务时简化 API 调用

Question

在我的大多数 API 调用中，我使用这种模式：

调用服务器和管道结果
检查错误并在需要时抛出

来自服务器的地图结果

public getItems() : Observable {

  return this.http.get<Item[]>>(environment.url + '/items').pipe(

         catchError((error:any)=> throwError('Failed getting items')),

         map((ret)=> this.mapResults(ret)));

}

有没有办法将 catchError 和 map 运算符合并为一个运算符？

像这样：

catchErrorAndMap("Message in case of error",itemForMapping)

itemForMapping 将进入映射功能。是这样的吗？

 return this.http.get<Item[]>>(environment.url + '/items').pipe(
    
                catchErrorAndMap('Failed getting items'),ret));

Answer 1

是的。 RxJS 运算符只是一个函数。因此，您可以编写自己的 RxJS 运算符。

这里有个例子：https://netbasal.com/creating-custom-operators-in-rxjs-32f052d69457

在标题为“从现有运算符创建运算符”的部分中。

因此您可以创建一个 catchErrorAndMap 函数，然后您可以将其用作运算符。

这是一个例子：

export function catchErrorAndMap(errorMessage): OperatorFunction<User[], User[]> {
  return source =>
    source.pipe(
      catchError((error: any) => throwError(errorMessage)),
      map(items => items.map(item => ({ ...item, name: item.name + "'s"} as User)))
    );
}

这将创建一个接受 Observable 和 returns Observable 的函数。您需要根据项目需要修改它。（可能是 Item[]）。

然后它通过所需的运算符将源（它是源流中发出的项目）通过管道传输。

在这个例子中，我使用了适合我的数据的地图操作。您当然可以将其更改为您的 this.mapResults().

您可以像任何其他管道运算符一样调用此运算符：

  users$ = this.http
    .get<User[]>(this.userUrl)
    .pipe(catchErrorAndMap("Error Occurred"));

在 Angular 8 中使用管道和 Http 服务时简化 API 调用

Simplify API calls when using pipe and HttpService in Angular8

httpservice

rxjs

angular