Rxjs 里 subscribeToArray 工具函数的详细分析

简介: Rxjs 里 subscribeToArray 工具函数的详细分析

image.png

该函数接收一个 array 作为输入参数,遍历这个 array,将其每个元素,作为另一个匿名函数执行的一部分。该匿名函数体内,将 array 的元素作为 subscriber 订阅函数的输入:

image.png

<html>
<script>
const subscribeToArray = (array) => (subscriber) => {
    for (let i = 0, len = array.length; i < len && !subscriber.closed; i++) {
        subscriber.next(array[i]);
    }
    subscriber.complete();
};
const aInput = [1,2,3,4];
const newFunction = subscribeToArray(aInput);
debugger;
</script>
</html>

image.png

<html>
<script>
const subscribeToArray = (array) => (subscriber) => {
    for (let i = 0, len = array.length; i < len && !subscriber.closed; i++) {
        subscriber.next(array[i]);
    }
    subscriber.complete();
};
const aInput = [1,2,3,4];
const newFunction = subscribeToArray(aInput);
const subscriber = {
  closed: false
};
subscriber.next = (data) => console.log("next: " + data);
subscriber.complete = () => console.log("completed!");
debugger;
newFunction(subscriber);
</script>
</html>

image.png

直到应用程序代码调用 Observable 的 subscribe 方法时,才会变量 input 数组,用 subscribe 的 next 方法依次处理 input 数组的元素。在 CombineLatest Operator 的例子里,input 元素就是 Observable 对象的组合。

相关文章
|
8月前
|
前端开发
rxjs Observable 设计原理背后的 Pull 和 Push 思路
rxjs Observable 设计原理背后的 Pull 和 Push 思路
28 0
|
9月前
|
JSON 小程序 算法
uniapp小程序封装常用工具函数
类似的工具函数还有很多,这里暂时不一一列举了,上面提到的银行卡校验,还可以使用阿里公开的一个校验接口cardNo=银行卡号码&cardBinCheck=true这个接口会返回对应的银行简称银行卡类型,如果想要显示对应的银行logo的话,可以联系我,由于JSON数据太大,没办法全部放在这里。
129 0
|
9月前
|
存储 缓存 JavaScript
深入浅出 RxJS 核心原理(响应式编程篇)
在最近的项目中,我们面临了一个需求:监听异步数据的更新,并及时通知相关的组件模块进行相应的处理。传统的事件监听和回调函数方式可能无法满足我们的需求,因此决定采用响应式编程的方法来解决这个问题。在实现过程中发现 RxJS 这个响应式编程库,可以很高效、可维护地实现数据的监听和组件通知。
181 0
深入浅出 RxJS 核心原理(响应式编程篇)
|
4月前
|
前端开发 JavaScript 安全
Promise/A+ 规范详解:打造健壮异步代码的必备知识(上)
Promise/A+ 规范详解:打造健壮异步代码的必备知识(上)
Promise/A+ 规范详解:打造健壮异步代码的必备知识(上)
|
20天前
|
JavaScript 前端开发
js开发:请解释同步和异步编程的区别。
同步编程按顺序执行,易阻塞;异步编程不阻塞,提高效率。同步适合简单操作,异步适合并发场景。示例展示了JavaScript中同步和异步函数的使用。
20 0
|
3月前
|
JavaScript 前端开发 算法
|
4月前
|
前端开发 安全
Promise/A+ 规范详解:打造健壮异步代码的必备知识(下)
Promise/A+ 规范详解:打造健壮异步代码的必备知识(下)
Promise/A+ 规范详解:打造健壮异步代码的必备知识(下)
|
5月前
|
前端开发 JavaScript
JavaScript开发中ES6+新特性:如何使用Promise来处理异步操作?
JavaScript开发中ES6+新特性:如何使用Promise来处理异步操作?
33 1
|
7月前
|
前端开发
关于 rxjs 编程中的 take(1) 操作
关于 rxjs 编程中的 take(1) 操作
31 0
|
8月前
|
存储
rxjs Observable 自定义 Operator 的开发技巧
rxjs Observable 自定义 Operator 的开发技巧
36 0