大家好,
今天我想开始一个关于使用RxJS进行响应式编程的小系列。
我从这个编程范式背后的基本核心概念开始,向后移动并展示 RxJS 库的潜力。
这个系列的想法是几周前在重构 Angular 应用程序时诞生的,因为我注意到代码库中有很多关于 RxJS 的错误。不幸的是,这段代码背后的问题是开发人员在没有 RxJS 库和响应式编程基础知识的情况下开始使用角度框架。所以我决定写一些文章来展示 RxJS 库和响应式编程背后的基础知识。
在进入本文主题之前先介绍一下:RxJS 是一个用于使用可观察序列编写异步和基于事件的程序的库。所以 RxJS 和响应式编程并不能解决你所有的问题,但在异步和事件是明星的情况下,它们是很好的解决方案。我更愿意澄清这一点,因为有时程序员相信,但在引入响应式编程之后,他们会遇到其他问题,因为库和范例非常简单,但同时如果你不这样做很容易受伤知道它是如何工作的。
关于该系列的最后信息:代码是用 Typescript 编写的,但如果您愿意,也可以在普通 javascript 中使用 RxJS。
现在让我们从第一个参数开始,响应式编程背后的明星,Observable。
Observables(被观察者)是 Reactive Programming 背后的关键概念之一,还有 Observers 和 Subscribers(观察者、控制者)。
Observable 可以是流或数据集合,但您可以将 observable 想象成多个值的惰性 Push 集合。
为了更好地理解这个概念,让我给你举个例子
import { Observable, Subscriber } from "rxjs";
const observable = new Observable<string>((subscriber: Subscriber<string>) => {
subscriber.next("Hello World");
subscriber.error(new Error("Something went wrong!"));
subscriber.complete();
});
如您所见,Observable 是一个接受订阅者(回调函数)的类。
该订阅者有 3 个主要的可能操作:
next:next 方法将值作为参数传递给所有订阅,因此系统可以做出相应的反应。
error:error 方法在可观察对象执行期间发出错误。
complete:complete 方法将可观察对象设置为关闭。当这种情况发生时,为关闭的可观察对象发出的所有未来方法(next 和 error)都将被忽略。
为了更好地理解这是另一个示例,其结果在控制台中
import { Observable, Observer, Subscriber } from "rxjs";
const observer: Observer<string> = {
next: (value: string) => console.log("next", value),
error: (error: Error) => console.error("error", error),
complete: () => console.log("complete!"),
};
const observable = new Observable<string>((subscriber: Subscriber<string>) => {
subscriber.next("Hello");
subscriber.next("World");
subscriber.complete();
// this will never be logged
subscriber.error(new Error("Something went wrong!"));
subscriber.next("Hello");
subscriber.next("World");
});
observable.subscribe(observer);
next Hello
next World
complete!
ps此时不要关注观察者,为了简化它认为当订阅者调用next方法时,观察者中的下一个函数将被调用错误和完成方法也是如此
您可以注意到订阅者如何两次调用 next 方法:第一次使用“Hello”,然后使用“World”,结果被记录到控制台中。接下来,订阅者调用 complete 方法,它也在控制台中注册。之后,订阅者两次调用错误方法和下一个方法,但在控制台中没有任何反应。此行为是由于 observable 由 complete 方法结束,因此 observable 不再发出任何事件。
当我们完成 observable 时,重要的是要记住所有接下来调用的方法(next、error 或 complete)都将被忽略。
如果你喜欢我的文章,记得关注获取更多的信息。感谢您的阅读,祝您有美好的一天!