Ng 实现Observable 和 subscribe （一）（实用、备忘）

最新推荐文章于 2023-07-10 22:03:37 发布

chelen_jak

最新推荐文章于 2023-07-10 22:03:37 发布

阅读量653

点赞数 1

分类专栏： Angular2 Ionic3 实用

原文链接：https://blog.csdn.net/qq_34414916/article/details/85194098?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161648017316780265496041%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161648017316780265496041&biz_id=0&utm_med

版权

Angular7 Observable subscribe Observer RxJS

关键词由CSDN通过智能技术生成

实用同时被 3 个专栏收录

738 篇文章 4 订阅

订阅专栏

Ionic3

175 篇文章 1 订阅

订阅专栏

Angular2

139 篇文章 0 订阅

订阅专栏

原文出处： Angular7入门辅助教程（五）——Observable（可观察对象）
方法一：

import { of } from 'rxjs/observable/of';
...
    private doTest() {
        //创建Observable对象
        let observable = of(1, 2, 3);
 
        //调用方法1：
        observable.subscribe({ next: num => console.log(num) });

        //调用方法2：
        observable.subscribe(num => { console.log(num) });
    }

调用方法1 和调用方法2 结果一样如下：

方法二：

import { Observable } from 'rxjs';
...
    private doTest() {
        //创建Observable对象
        const observable = Observable.create(observer => {
            try {
                observer.next(1);
                observer.next(2);
                observer.next("x");
            } catch (e) {
                observer.error(e);
            }
            observer.complete();
        });

        // 调用方法1： 
        const observer = {
            next: num => console.log(num),
            error: e => console.log(e),
            complete: () => console.log('complete!!!')
        }
        observable.subscribe(observer);

        // 调用方法2： 
        observable.subscribe(res => {
            console.log(res);
        });
    }

调用方法1 结果如下：
|
调用方法2 结果如下：

实现方法总结：
1、创建一个Observable（可观察对象），它会将参数一个一个的发送给订阅的observer;
2、创建一个observer（观察者）,它包含三个属性：next，error，complete均为函数，对Observable发来的参数进行接收并处理；
3、Observable调用subscribe方法告知observer对Obsverable的消息进行了订阅，并返回一个subscription对象（可以随时用unsubscribe()取消订阅）；