转载

理解观察者模式——用Angular的httpClient来解释观察者

前言

本文关键词： 观察者模式 。

观察者模式是什么？

观察者模式和回调函数有什么关系？

使用httpClient时，加上.subscribe有什么作用？

Angular的httpClient中如何体现观察者模式？

解决了上述问题之后，就写了这篇文章。

（这篇文章实际上是给上一篇文章填个坑...上一篇写到回调函数，却没有给出实际应用的例子。）

引入问题：httpClient

httpClient是Angular中的一个内置类，用于 向后台发起Http请求、返回请求结果 。用它来举例子是因为功能比较简单，易于理解。

在Angular中有这么一种写法：

// 向8080端口的helloWorld路径发起请求
httpClient.get('http://localhost:8080/helloWorld')
  .subscribe((data) => {
    console.log('请求成功');
    console.log(data);
  }, error);
}

不经意一看，这不就是简单的 链式调用 么？——前一个方法返回一个对象，再调用这个对象的方法，再返回对象，再调用方法...

但是仔细看，才发现：这根本就不是一个过程，而是 两个过程 啊！

理解观察者模式——用Angular的httpClient来解释观察者

从使用 .get向后台发起请求 之后，到 调用.subscribe 之前，这之中经历了一个后台接收数据、处理数据、返回数据的过程。

那么问题来了：

~~挖掘机技术哪家强？~~ 前台如何知道数据什么时候返回？怎么在数据返回之后，自动执行后面的代码来打印返回数据？

理解观察者模式——用Angular的httpClient来解释观察者

观察者模式

观察者模式，顾名思义，有这样一个对象，在始终被另一个对象观察着、注视着、紧紧的盯着。

用杂志社做比喻：有一个 杂志社 ， 杂志社 里有一个 订阅报刊的部门 ，一个读者向这个部门订阅了杂志，从此以后读者日日期盼着读到自己买的杂志，而 订阅部门 也会在新的杂志出版之后，第一时间送到读者手里。

这就是观察者模式，它由两部分组成：

数据源 + 订阅者 = 观察者模式

理解观察者模式——用Angular的httpClient来解释观察者

数据源和订阅者之间是 一对多 的关系。订阅者通过某种方法，向数据源发起订阅，此后，数据源一旦发生变更，会马上通知所有的订阅者。

既然知道了原理，那么在httpClient中具体是怎么实现的呢？

我们找到源码， httpClient类 的所有方法都写在里面，并且有一大堆重载：

理解观察者模式——用Angular的httpClient来解释观察者

我们拿出一个方法来看看：

/**
     * Constructs a `GET` request that interprets the body as a text string
     * and returns the response as a string value.
     *
     * @param url     The endpoint URL.
     * @param options The HTTP options to send with the request.
     *
     * @return An `Observable` of the response, with the response body of type string.
     */
    get(url: string, options: {
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        observe?: 'body';
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        reportProgress?: boolean;
        responseType: 'text';
        withCredentials?: boolean;
    }): Observable<string>;

把代码格式化一下，变成我们容易理解的方式：

理解观察者模式——用Angular的httpClient来解释观察者

可以看到get方法的 必填参数 是请求地址URL，还有 可选参数 。但这些都不重要，关键在于，普通的方法，用 方法名+参数 就完事了，比如：

test()；

再看这个方法的最后，多出了一个 : Observable<string> 这是观察者的关键！这条代码的意思是：返回类型为“观察者”的对象，这个观察者携带着string类型的被观察的数据。

Observable是“可观察的”意思，声明一个方法有可观察的对象之后，这个方法的返回值就不再是一个普通变量，而是一个“观察者”对象，我们对这个对象使用.subscribe方法订阅，就可以传入函数进行回调了。

我们在控制台打印一下.get()方法的返回值:

console.log(this.httpClient.get(`http://localhost:8080/Klass/${klass.id}`));

理解观察者模式——用Angular的httpClient来解释观察者

果然是一个对象，这个对象包含了 订阅数据源 的功能，等到数据返回之后再使用.subscribe方法来操作返回的数据。

理解观察者模式——用Angular的httpClient来解释观察者

接下来，我们来看subscribe方法：

subscribe(observer?: PartialObserver<T>): Subscription;
/** @deprecated Use an observer instead of a complete callback */
subscribe(next: null | undefined, error: null | undefined, complete: () => void): Subscription;
/** @deprecated Use an observer instead of an error callback */
subscribe(next: null | undefined, error: (error: any) => void, complete?: () => void): Subscription;
/** @deprecated Use an observer instead of a complete callback */
subscribe(next: (value: T) => void, error: null | undefined, complete: () => void): Subscription;
subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;

依然是选出一个，格式化成熟悉的形式：

理解观察者模式——用Angular的httpClient来解释观察者