将 RxJS 过滤器转换为 Async/Await

Source: Dev.to

比较响应式流和异步流：等价的转换

异步编程：基础

异步编程允许程序在不立即等待操作完成的情况下启动该操作。程序会继续执行其他任务，随后在异步操作结束时收到通知。通常通过 回调（callbacks）、Promise 或 async/await 实现。它非常适合处理 I/O（输入/输出）操作，如网络请求或文件读取，因为这些操作的等待时间可能较长。

响应式流：对数据作出响应

响应式流是一种更偏向数据的方式。它关注数据如何随时间被发出、接收和转换。响应式流本质上是一系列可以被观察并作出响应的事件。RxJava、RxJS、Reactor 等框架提供了创建、组合和声明式转换数据流的工具。其主要优势在于能够处理持续到达且量级不一的数据流，因而非常适合实时系统和流媒体场景。

两种方法的比较

等价的转换：异步 vs. 响应式

单次异步调用（Promise）与响应式流

异步（JavaScript + Promise）：

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}
fetchData();

响应式（RxJS）：

import { fromFetch } from 'rxjs/fetch';
import { switchMap, tap, of } from 'rxjs';

fromFetch('https://api.example.com/data')
  .pipe(
    switchMap(response => {
      if (response.ok) {
        return response.json();
      } else {
        return of({ error: response.status });
      }
    }),
    tap(data => console.log(data))
  )
  .subscribe();

在此示例中，异步的 fetch 调用等价于一个在请求完成后发出单个值的响应式流。

映射（Map）与数据处理

异步（JavaScript + Promise.all）：

async function processData() {
  const results = await Promise.all([
    fetch('https://api.example.com/data1').then(res => res.json()),
    fetch('https://api.example.com/data2').then(res => res.json())
  ]);
  const mappedResults = results.map(item => item.value * 2);
  console.log(mappedResults);
}
processData();

响应式（RxJS）：

import { forkJoin, fromFetch } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

forkJoin({
  data1: fromFetch('https://api.example.com/data1').pipe(
    switchMap(response => response.json())
  ),
  data2: fromFetch('https://api.example.com/data2').pipe(
    switchMap(response => response.json())
  )
})
.pipe(
  map(results => [results.data1.value * 2, results.data2.value * 2])
)
.subscribe(mappedResults => console.log(mappedResults));

两个示例都展示了如何转换获取到的数据。异步方式使用 Promise.all 和 map；响应式方式使用 forkJoin（合并流）和 map。

结论

异步编程和响应式流都是构建现代应用的强大工具。选择哪种方式取决于项目的具体需求。异步编程适用于简单任务和对响应速度要求高的场景。响应式流在处理连续数据流和复杂转换时表现出色。理解这两种方法之间的等价关系可以最大化利用各自的优势，构建健壮高效的应用。将这两种技术结合使用，往往是解决复杂系统的关键。