关键RXJS操作员每个角开发人员都应该知道-DEV365 开发者社区

今天，我们的一位队友对他们在Angular中创建搜索功能需要哪些RXJS运营商感到好奇。我让他们知道，尽管RXJS有大量操作员，但他们不需要全部了解。我通常坚持使用地图，过滤器，点击，switchmap，concatmap，commineLatest，startwith，DifctionNuntilChanged，debouncetime和Catherror。

因此，我认为向他们展示一个实践例子将更有帮助。我使用“ Dummyjson API”来创建搜索功能，并包括我前面提到的所有必需RXJS操作员。这样，他们可以在现实生活中看到一切如何一起工作。 ð

方案

我们需要创建一个角服务来开发产品搜索功能，从“ Dummyjson API”获取数据。用户可以按名称搜索产品，该应用将显示结果。

这是我们的角度服务，它将与API通信：

import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import {
  catchError,
  debounceTime,
  distinctUntilChanged,
  filter,
  map,
  switchMap,
  tap,
} from 'rxjs/operators';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ProductsService {
  private readonly apiURL = 'https://dummyjson.com/products/search';

  http = inject(HttpClient);

  searchProducts(query: string): Observable<any[]> {
    return of(query).pipe(
      debounceTime(300),
      distinctUntilChanged(),
      filter((q) => q.length > 2),
      switchMap((q) =>
        this.http.get(`${this.apiURL}?q=${q}`).pipe(
          catchError((error) => {
            console.error('Error fetching products:', error);
            return of([]);
          }),
          map((response: any) => response.products),
          tap((products) => console.log('Fetched products:', products))
        )
      )
    );
  }
}

好，但是这些操作员在做什么？

RXJS运算符

debouncetime ：减少快速事件debounceTime操作员限制了处理事件的速率。通过使用debounceTime(300)，我们确保我们的服务仅处理用户输入每300毫秒，从而在用户迅速键入时防止API请求过多。
```
debounceTime(300),
```
独特的未固定：消除重复的distinctUntilChanged操作员确保不会发出连续的重复值。这有助于避免向API重复请求。
```
distinctUntilChanged(),
```
过滤器：完善搜索filter操作员通过确保在进行API之前至少要有三个字符来完善我们的查询。这缩小了搜索结果。
```
filter(q => q.length > 2),
```
switchmap ：处理可观察到的switchMap操作员允许我们在可观测值之间切换。在此示例中，我们仅在用户输入通过debounceTime，distinctUntilChanged和filter之后才能从API获取数据。
```
switchMap(q => this.http.get(`${this.apiURL}?q=${q}`).pipe(/* ... */)),
```
catheror ：处理错误catchError操作员在遇到任何问题时可以优雅地处理错误。
```
catchError(error => /* handle error */),
```
地图：转换数据map操作员会转换可观察到的数据。在我们的示例中，我们使用它从API响应中提取product属性。
```
map((response: any) => response.products),
```
tap ：副作用tap操作员允许我们执行副作用，例如记录，而不会影响主数据流。在我们的情况下，我们使用它来记录被取出的产品。

  tap((products) => console.log('Fetched products:', products))

完成；我们已经了解了每个操作员在我们的搜索服务中使用的目的和解释。

结论

我们已经使用了我们之前讨论过的所有操作员，我希望他们对您有意义。这些是我经常使用的。还有另一个流行的运营商称为CombineLatest，我们在这里不包括，但不用担心。您可以在另一篇文章中查看。总而言之，合并的运营商在使用RXJ时非常方便。即使有很多运营商，我们讨论的运营商也应该帮助您完成日常任务。我真的希望这些示例使您的RXJS旅程变得更加容易！ ð