将 RxJS Observables 转换为 Async/Await

Source: Dev.to

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

异步编程：基础

异步编程允许程序在不立即等待操作完成的情况下启动该操作。程序会继续执行其他任务，并在异步操作完成后收到通知。通常通过回调、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, of, tap } 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, from } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
import { fromFetch } from 'rxjs/fetch';

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

两个示例都演示了如何转换获取到的数据。在异步方式中使用 Promise.all 和 Array.map；在响应式方式中使用 forkJoin（合并流）以及 RxJS 的 map 操作符。

结论

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