在Angular8中使用管道和HttpService时简化API调用

如何解决在Angular8中使用管道和HttpService时简化API调用

在我的大多数API调用中，我都使用以下模式：

1. 呼叫服务器和管道结果

2. 检查错误并在需要时抛出

3. 服务器的地图结果

   public getItems（）：Observable {

   var socket = io.connect("http://" + document.domain + ":" + location.port + "/some_namespace");
   

   }

是否可以将catchError和map操作符合并为一个操作符？

类似这样的东西：

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

         catchError((error:any)=> throwError('Failed getting items')),map((ret)=> this.mapResults(ret)));

itemForMapping将进入映射功能。这样的东西？

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

解决方法

是的。 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 并返回Observable 的函数。您需要根据项目需要对其进行修改。 （可能是Item []）。

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

在此示例中，我使用了适合于我的数据的映射操作。您当然可以将其更改为您的this.mapResults()。

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

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