Angular--响应式编程

￡神魔★判官ぃ 2021-09-27 09:02 355阅读 0赞

# 前言 #

Angular学习非常的有趣，而且要学的内容非常多，这次给大家介绍一下如何响应式编程。

# 内容 #

提到响应式编程，不得不说一下观察者模式，观察者模式就是用到了响应式编程，如下图：  
![这里写图片描述][70]  
这个图中介绍了观察者（Observer）和被观察者（Observable）两方面的交互，看完这个图你是否对于观察者模式有一定的了解了，那么接下来就直接简单粗暴的上代码：

HTML：
    
    <p>
        bindworks!
    </p>
    
    <input #myField (keyup)="onKey(myField.value)">

**—————————-华——丽——-的——–分——-割———线————————–**

TypeScript：
    
    import{Component,OnInit}from'@angular/core';
    import{Observable}from'rxjs';
    
    @Component({
        selector:'app-bind',
        templateUrl:'./bind.component.html',
        styleUrls:['./bind.component.css']
    })
    exportclass BindComponent implements OnInit{
        constructor(){
            Observable.from([1,2,3,4,6,8,10])
                .filter(e=>e%2===0)
                .map(e=>e*e)
                .subscribe(
                    e=>console.log(e),
                    err=>console.error(err),
                    ()=>console.log('结束啦！')
                );
        }
    
        ngOnInit(){
    
        }
    }

HTML代码是介绍如何在界面中显现出来，核心代码是在TypeScript中，即下面这段代码，现在我们来好好分析下面这段代码：  
Observable对象的From方法从一个数组中创建了一个可监听的流（也就是被观察者Observable）。  
针对这些流我们可以进行操作如：`.filter`、`.map`等很多，  
`.subscribe`接收并处理对订阅中的流中的元素的对象，里面的元素称为观察者，如：

e=>console.log(e),
    err=>console.error(err),
    ()=>console.log('结束啦！')

所有的这一切组合起来就是一个观察者模式，响应式编程就是观察者模式的一个实现。  
在响应式编程里面：  
`被观察者`（流）可以做三件事：

> 1.  发射下一个元素，这个元素可以是任何东西，它的类型取决于流的源头，如：在此项目中是一个数字类型的数组。。
> 2.  流可以抛出一个异常，处理的时候抛异常。
> 3.  发射一个信号，告诉观察者流已经结束。

`观察者`可以做三件事：

> 1.  接收被观察者发射出的元素。
> 2.  处理被观察者抛出的异常。
> 3.  接收被观察者已经结束的信息，并且被调用。  
>     
>     
>     1.  2和3项可有也可无，没有也能照样能进行。

# 总结 #

简单的介绍了一下响应式编程，这方面的内容还有很多，需要我们好好去学习，所以，少年，加油吧！

# end #

谢谢您的阅读！

[70]: /images/20210923/531178ba2b8c49d6bad06ba47faefb2e.png