程序笔记   发布时间:2022-07-04  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了从一个实际的例子触发,理解什么是 Rxjs 的 defer 函数大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

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

看下面这个具体的例子。

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

我们来单步调试下上面这段代码。首先进入 defer 内部执行逻辑:

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

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

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

我们再单步执行,发现程序执行流从上图的第5行,跳转到了 第16行。这体现了 defer 函数延迟创建 Observable 对象的行为。所谓延迟创建,准确的说,应该是延迟了包含业务逻辑的 Observable 对象的创建。

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

紧接着,回到@R_302_9616@代码,此时针对 defer 函数返回的 wrapper Observable 对象调用 subscribe,这时候就会触发包含业务逻辑的 Observable 对象的创建了:

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

defer 返回的 wrapper Observable 的订阅函数在此处执行:

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

调用工厂方法,进行包含业务逻辑的 Observable 对象创建:

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

当前随机数执行结果大于 0.5,返回 fromEvent 生成的新 Observable 对象。

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

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

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

总结 defer 的工作原理:

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

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

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

更多jerry的原创文章,尽在:"汪子熙":

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

大佬总结

以上是大佬教程为你收集整理的从一个实际的例子触发,理解什么是 Rxjs 的 defer 函数全部内容,希望文章能够帮你解决从一个实际的例子触发,理解什么是 Rxjs 的 defer 函数所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。