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

「爱情、让人受尽委屈。」 2022-11-12 09:45 100阅读 0赞

原文出处： [Angular7入门辅助教程（五）——Observable（可观察对象）][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 结果一样如下：  
![20210323163405837.png][]

方法二：

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

[Angular7_Observable]: 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_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-85194098.first_rank_v2_pc_rank_v29_10&utm_term=Observable
[20210323163405837.png]: /images/20221022/80afae658c2644f384e833972c131bd5.png
[20210323163527724.png]: /images/20221022/da82ca34dc7e4701880878107143926b.png
[202103231638016.png]: /images/20221022/ab66a0fc63674ddfac2594c1941f3e00.png