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

Question

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

1. 调用服务器和管道结果

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

来自服务器的

1. 映射结果

public getItems()：Observable {

返回this.http.get>(environment.url + '/items').pipe( (错误:任意)=> throwError('Failed‘)，map(Ret)=>this.mapResults(Ret))；

}

有没有办法将catchError和映射运算符合并到一个操作符中？

就像这样：

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

然后，它将源(即源流发出的项)通过所需的运算符进行管道传输。

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

您可以像其他管道操作符一样调用这个操作符：

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