Rxjs6 是一个流行的响应式编程库，支持基于事件驱动的编程方式。它提供了强大的工具来处理异步数据流，包括 filter、map、reduce 等等操作符，使得处理数据变得更加容易。而 Rxjs6 中引入的 pipe 运算符实现了更加高效的函数式编程方式，大大简化了代码。
pipe
pipe 是 Rxjs6 中引入的新的操作符，它可以将多个操作符链式组合成一个整体，实现更加灵活和可读性更强的代码。
pipe 的语法如下：
pipe<T, R>(...fns: Array<UnaryFunction<T, R>>): UnaryFunction<T, R>
其中 T 表示输入类型，而 R 表示输出类型。使用时，我们可以通过链式调用多个操作符，将它们组合在一起：
const obs = of(1, 2, 3).pipe( map(x => x * x), filter(x => x > 3), toArray() ); obs.subscribe(x => console.log(x));
这段代码将创建一个基于数组的数据流，对每个元素进行平方处理，过滤出大于 3 的元素，并将结果输出为数组。最终的结果为 [4, 9]。
实例分析
接下来我们看一个更复杂的案例。假设我们在一个 web 应用程序中使用了 Rxjs，我们需要向服务器发出一些请求，并在收到响应后更新用户界面。我们的目标是将请求的结果与用户输入的姓名匹配，以显示相关的活动和信息。
我们将处理以下三个异步操作：
- 向服务器发出请求并等待其响应
- 将任务结果与用户输入的姓名匹配
- 将结果渲染到用户界面
发出请求并等待响应
首先，我们需要发出 HTTP 请求并等待响应。我们可以使用 Rxjs 中的 ajax 函数来实现：
import { ajax } from 'rxjs/ajax'; const getProducts = () => ajax.getJSON('https://www.mockapi.io/api/v1/products');
上面的代码将调用 ajax 函数，并将其返回值包装在 Observable 管道中。
匹配用户输入与结果
我们下一步需要将任务结果与用户输入的姓名匹配。我们可以定义一个函数，这个函数接受一个流和一个名称作为输入，并返回一个经过处理的流：
const filterByName = (data$: Observable<any>, name: string) => data$.pipe( switchMap(data => from(data)), filter(data => data.name.toLowerCase().includes(name.toLowerCase())), toArray() );
我们通过 switchMap 操作符将数据流转换为 Observable，filter 操作符用于过滤数据流，我们在这里判断数据中是否包含该名称。最后使用 toArrary 操作符以数组形式收集满足条件的数据。
渲染到用户界面
最后一步需要将任务结果渲染到用户界面。我们可以执行以下步骤：
-- -------------------- ---- ------- ----- ------------- - --------- ------ -- - ----- -- - ----------------------------------- ------------ - ------- ----- - -- ----- ------------- ------------------ ----------------------- ------- - ------------ -- ----- -------- - ----- -------------- -- - ----- --- - ---------- -- ----------------- --------------------------- ------------------------------------ -- ----------------------------------------------------------- ----------展开代码
我们最终会得到一个完整的应用程序，可以在用户输入名称后从服务器访问数据并显示匹配的结果。为了实现该应用程序，我们需要依次执行以下步骤：
- 发送 HTTP 请求并等待响应
- 将结果与用户输入的姓名匹配
- 将结果渲染到用户界面
实现这三个步骤的关键是在 Rxjs6 中使用 pipe 运算符。使用 Rxjs6 可以更加高效、简单地实现这三个操作，这是任何一个前端开发人员都应该学会的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d77648a941bf7134d60f8c
