从一个实际的例子触发,理解什么是 Rxjs 的 defer 函数

简介: 从一个实际的例子触发,理解什么是 Rxjs 的 defer 函数

我们在开发复杂的 Angular 应用时,经常会使用到 Rxjs 的 defer 函数,例如:

image.png创建一个 Observable,在订阅时调用 Observable 工厂为每个新的 Observer 创建一个 Observable 对象。


该函数接收一个输入参数,类型为一个工厂函数。输出为一个 Observable 对象,一旦被订阅时,其绑定的工厂函数会被调用。


defer 的实质是延迟创建机制,即只有在返回的 Observable被订阅时,才开始创建 Observable 对象。


defer 允许你只在 Observer 订阅时创建一个 Observable。 它一直等到 Observer 订阅它,调用给定的工厂函数来获取一个 Observable —— 工厂函数通常会生成一个新的 Observable —— 并将 Observer 订阅到这个 Observable。 如果工厂函数返回一个假值,则使用 EMPTY 作为 Observable 代替。 最后但并非最不重要的是,工厂函数调用期间的异常通过调用 error 传递给观察者。


看下面这个具体的例子。image.png我们来单步调试下上面这段代码。首先进入 defer 内部执行逻辑:

image.png在 defer 内部,直接构造一个新的 Observable,并且将工厂函数传入。该工厂函数在第8行被调用,用于生成一个包含应用程序业务逻辑的 Observable 对象,存储在 input 里。最后,将应用程序的subscriber 订阅到这个工厂函数返回的 Observable 上。

image.png我们再单步执行,发现程序执行流从上图的第5行,跳转到了 第16行。这体现了 defer 函数延迟创建 Observable 对象的行为。所谓延迟创建,准确的说,应该是延迟了包含业务逻辑的 Observable 对象的创建。image.png紧接着,回到我们的应用代码,此时针对 defer 函数返回的 wrapper Observable 对象调用 subscribe,这时候就会触发包含业务逻辑的 Observable 对象的创建了:image.pngdefer 返回的 wrapper Observable 的订阅函数在此处执行:image.png调用工厂方法,进行包含业务逻辑的 Observable 对象创建:image.png当前随机数执行结果大于 0.5,返回 fromEvent 生成的新 Observable 对象。

image.png紧接着,第24行的匿名函数 x => console.log(x),每当屏幕被鼠标点击时,就会触发。这个匿名函数本来是订阅到 defer 函数返回的 wrapper Observable 对象的。当工厂函数返回了新的 Observable 对象后,它被自动订阅到这个新的 Observable 对象上。image.png总结 defer 的工作原理:


(1) defer 函数被调用时,传入一个工厂函数作为输入参数。这个工厂函数返回一个新的包含了业务逻辑的 Observable 对象。


(2) defer 函数返回另一个新的 Observable 对象,这个 Observable 对象称为 wrapper 或者 dummy Observable 对象,因为它不包含任何业务逻辑,存活的唯一价值就是,实现业务逻辑 Observable 对象的延迟创建。


(3) 当 wrapper Observable 被订阅时,触发工厂函数的执行,生成新的 Observable 对象,同时通知其 Observer.



image.png

相关文章
|
9天前
|
存储 JavaScript 前端开发
JS的执行原理,一文了解Event Loop事件循环、微任务、宏任务
了解JavaScript的事件循环和任务队列对于处理异步任务至关重要。事件循环由主线程和任务队列组成,当主线程执行完同步任务后,会检查任务队列,按顺序执行宏任务和微任务。宏任务包括`setTimeout`等,微任务如`Promise`的回调。在实际开发中,事件循环保证了代码的非阻塞执行,提高了用户体验。例如,`setTimeout`的回调会在当前宏任务结束后,所有微任务执行完才会执行。理解这一机制对于解决面试中的异步问题非常有帮助。
12 0
JS的执行原理,一文了解Event Loop事件循环、微任务、宏任务
|
22天前
|
人工智能 机器人 中间件
【C++】C++回调函数基本用法(详细讲解)
【C++】C++回调函数基本用法(详细讲解)
|
1月前
|
前端开发 JavaScript
js开发:请解释Promise是什么,以及它如何解决回调地狱(callback hell)问题。
Promise是JavaScript解决异步操作回调地狱的工具,代表未来可能完成的值。传统的回调函数嵌套导致代码难以维护,而Promise通过链式调用`.then()`和`.catch()`使异步流程清晰扁平。每个异步操作封装为Promise,成功时`.then()`传递结果,出错时`.catch()`捕获异常。ES6的`async/await`进一步简化Promise的使用,使异步代码更接近同步风格。
18 1
|
6月前
|
Web App开发 移动开发 JavaScript
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
面试官:说一下script 标签中 defer(推迟) 和 async(异步) 的区别
64 0
|
7月前
|
JavaScript
JS输出、获取元素,变量,事件组成,流程控制,对象,函数
JS输出、获取元素,变量,事件组成,流程控制,对象,函数
|
4月前
|
前端开发 JavaScript 数据库
JavaScript基础知识:解释一下回调地狱(Callback Hell)。
JavaScript基础知识:解释一下回调地狱(Callback Hell)。
65 1
|
6月前
|
前端开发 JavaScript Java
函数防抖节流原理及封装+闭包+call/apply/bind
函数防抖节流原理及封装+闭包+call/apply/bind
47 0
|
7月前
|
前端开发 JavaScript
将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子
将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子
45 0
|
8月前
|
JavaScript 前端开发
JS引擎的执行机制event loop
JS引擎的执行机制event loop
45 0
|
11月前
|
前端开发 JavaScript IDE
一些关于JS的过程抽象的高阶函数的使用的例子(单次点击,防抖,节流)
在JavaScript中,我们很常见的是需要掌握**过程抽象**的思想。对于过程抽象,是函数式编程思想的应用。而 **高阶函数(HOF)**  便是过程抽象的体现之一。 接下来我们就来一起学习一下常见的高阶函数。 # Once 在一些场景下,我们可能会遇到这样的需求,我们做了一个报名页面,然后需要用户提交报名成功的个人信息,但是用户可能会因为手抖,或者是一些网络的卡顿之类的原因,造成了用户在短时间内大量点击提交按钮,这时候可能会突然出现很多用户提交的相同的信息,为了避免这种情况,我们可以在前端做出一定的优化。 我们可以利用这样的高阶函数来完成优化: ``` function once