1. RxJS - 可观察

偏执的太偏执、 2024-03-16 12:23 35阅读 0赞

大家好，  
今天我想开始一个关于使用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）都将被忽略。  
如果你喜欢我的文章，记得关注获取更多的信息。感谢您的阅读，祝您有美好的一天！