站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

浅析Angular中的可观察对象、观察者和RxJS操作符

时间:2022-01-11 [网络编程]作者:fabuyuan 浏览:5 次

本篇文章带大家了解Angular中的可观察对象(Observable)、观察者(observer)和RxJS操作符,希望对大家有所帮助!

浅析Angular中的可观察对象、观察者和RxJS操作符  2

Observable(可观察对象)

Observable(可观察对象),是RxJS库里面的一个对象,可以用来处理异步事件,例如HTTP请求(实际上,在Angular中,所有的HTTP请求返回的都是Observable)。【相关教程推荐:《angular教程》】

或许,你以前接触过一个叫promise的东西,它们本质上面是相同的:都是生产者主动向消费者“push”产品,而消费者是被动接收的,但是他们两者还是有很大区别的:Observable可以发送任意多值,并且,在被订阅之前,它是不会执行的!这是promise不具备的特点。

  • Observable用于在发送方和接收方之间传输消息,你可以将这些消息看成是流
  • 在创建Observable对象时,需要传入一个函数作为构造函数的参数,这个函数叫订阅者函数,这个函数也就是生产者向消费者推送消息的地方
  • 在被消费者subscribe(订阅)之前,订阅者函数不会被执行,直到subscribe()函数被调用,该函数返回一个subscription对象,里面有一个unsubscribe()函数,消费者可以随时拒绝消息的接收!
  • subscribe()函数接收一个observer(观察者)对象作为入参
  • 消息的发送可以是同步的,也可以是异步的

observer(观察者)

有了可观察对象(发送方),就需要一个观察者(接收方)来观察可观察对象,观察者要实现observer接口,它是一个对象,其中包含三个属性,它们都是函数,如下:

通知类型说明
next必要。以接收的值作为入参,在正常情况下执行。可能执行零次或多次。
error可选。出错的情况下执行。错误会中断这个可观察对象实例的执行过程。
complete可选。传输完成的情况下执行。

订阅

只有当有人订阅 Observable 的实例时,它才会开始发布值。 订阅时要先调用可观察对象的 subscribe() 方法,并把一个观察者对象传给它,用来接收通知。如下:

为了展示订阅的原理,需要先创建新的可观察对象。它有一个构造函数可以用来创建新实例,但是为了更简明,也可以使用 Observable 上定义的一些静态方法来创建一些常用的简单可观察对象:

  • of(...items) :返回一个 Observable 实例,它用同步的方式把参数中提供的这些值一个一个发送出来。
  • from(iterable) : 把它的参数转换成一个 Observable 实例。 该方法通常用于把一个数组转换成一个(发送多个值的)可观察对象。
import { of } from "rxjs";
// 1、通过 of() 方法返回一个可观察对象,并准备将1,2,3三个数据发送出去
const observable = of(1, 2, 3);	
// 2、实现 observer 接口,观察者
const observer = {	
	next: (num: number) => console.log(num),
	error: (err: Error) => console.error('Observer got an error: ' + err),
  	complete: () => console.log('Observer got a complete notification'), 
}
// 3、订阅。调用可观察对象的 subscribe() 方法订阅,subscribe() 方法中传入的对象就是一个观察者
observable.subscribe(observer);

运行结果如下:

浅析Angular中的可观察对象、观察者和RxJS操作符  2
上面订阅的写法可以直接改为如下:参数不是对象

observable.subscribe(
  num => console.log(num),
  err => console.error('Observer got an error: ' + err),
  () => console.log('Observer got a complete notification')
);

订阅者函数

在上面的例子中使用的是of()方法来创建可观察对象,这节使用构造函数创建可观察对象。

Observable 构造函数可以创建任何类型的可观察流。 当执行可观察对象的 subscribe() 方法时,这个构造函数就会把它接收到的参数作为订阅函数来运行。 订阅函数会接收一个 Observer 对象,并把值发布给观察者的 next()方法。

// 1、自定义订阅者函数
function sequenceSubscriber(observer: Observer<number>) {
  observer.next(1);	// 发送数据
  observer.next(2);	// 发送数据
  observer.next(3);	// 发送数据
  observer.complete();
  return {unsubscribe() {}};
}

// 2、通过构造函数创建一个新的可观察对象,参数就是一个订阅者函数
const sequence = new Observable(sequenceSubscriber);

// 3、订阅
sequence.subscribe({
  next(num) { console.log(num); },	// 接受数据
  complete() { console.log('Finished sequence'); }
});

运行结果如下:

浅析Angular中的可观察对象、观察者和RxJS操作符  2

上面一个例子演示了如何自定义订阅函数,那么既然可以自定义订阅者函数,我们就可以将异步代码封装进可观察对象的订阅者函数中,待异步代码执行完再发送数据。如下:

import { Observable } from 'rxjs'
// 异步函数
function fn(num) {
    return new Promise((reslove, reject) => {
        setTimeout(() => {
            num++
            reslove(num)
        }, 1000)
    })
}
// 创建可观察对象,并传入订阅者函数
const observable = new Observable((x) => {
    let num = 1
    fn(num).then(
    	res => x.next(res)	// 异步代码执行完成,发送数据
    ) 
})
// 订阅,接收数据,可以改为链式调用
observable.subscribe(data => console.log(data))	// 2

多播

https://angular.cn/guide/observables#multicasting

RxJS操作符

我们可以使用一系列的RxJS操作符,在这些消息被接收方接收之前,对它们进行一系列的处理、转换,因为这些操作符都是纯函数。

import { of } from 'rxjs';
import { map } from 'rxjs/operators';
// 1、创建可观察对象,并发送数据
const nums = of(1, 2, 3);
// 2、创建函数以接受可观察对象
const squareValues = map((val: number) => val * val);
const squaredNums = squareValues(nums);

squaredNums.subscribe(x => console.log(x));

上面的方式我看不懂且难以接受,一般常用下面这种,使用pipe把多个操作符链接起来

import { map, Observable, filter } from 'rxjs'

// 创建可观察对象,并传入订阅者函数
const observable = new Observable((x) => {
    x.next(1)
    x.next(2)
    x.next(3)
    x.next(4)
}).pipe(
    map(value => value*100),		// 操作符
    filter(value => value == 200)	// 操作符
)
.subscribe(data => console.log(data))	// 200

错误处理

RxJS 还提供了catchError 操作符,它允许你在管道中处理已知错误。
假设你有一个可观察对象,它发起 API 请求,然后对服务器返回的响应进行映射。如果服务器返回了错误或值不存在,就会生成一个错误。如果你捕获这个错误并提供了一个默认值,流就会继续处理这些值,而不会报错。如下:

import { map, Observable, filter, catchError, of } from 'rxjs'

const observable = new Observable((x) => {
        x.next(1)	// 发送数据 1 和 2
        x.next(2)
}).pipe(
    map(value => {
        if (value === 1) {	// 1、当发送的数据为 1 时,将其乘以 100
            return value*100
        } else {	// 2、否则抛出错误
            throw new Error('抛出错误');
        }
    }),
    // 3、此处捕获错误并处理错误,对外发送数据 0
    catchError((err) => {
        console.log(err)
        return of(0)
    })
)
.subscribe(
    data => console.log(data),
    // 4、由于上面抛出的错误被 catchError 操作符处理(重新发送数据)了,所以这里能顺利订阅到数据而不报错
    err => console.log('接受不到数据:', err)
)

最后的运行结果如下:

浅析Angular中的可观察对象、观察者和RxJS操作符  2

更多编程相关知识,请访问:编程视频!!

以上就是浅析Angular中的可观察对象、观察者和RxJS操作符的详细内容,更多请关注站长家园其它相关文章!

本文标签:  Angular可观察对象观察者RxJS操作符

转载请注明来源:浅析Angular中的可观察对象、观察者和RxJS操作符

本文永久链接地址:https://www.adminjie.com/post/7486.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • docker能用yum命令吗

      docker能用yum命令吗

      docker能用yum命令,docker容器内安装yum的方法:1、通过“apt-getupdate”更新apt-get指令;2、通过“apt-getins...

    • 如何解决docker telnet不通的问题

      如何解决docker telnet不通的问题

      dockertelnet不通的解决办法:1、查看配置文件;2、修改nginx配置文件的端口为80;3、重新加载即可。本文操作环境:centOS6.8系统、Do...

    • css怎样改变一个图片高度和宽度

      css怎样改变一个图片高度和宽度

      在css中,可以使用width和height属性来改变一个图片高度和宽度,只需要给图片元素添加“width:宽度值;height:高度值;”样式即可。width...

    • docker不能删除镜像怎么办

      docker不能删除镜像怎么办

      docker不能删除镜像的解决办法:1、删除REPOSITORY;2、删除IMAGEID;3、通过“dockerimages”查看镜像即可。本文操作环境:c...

    • css怎么实现图片放大缩小动画

      css怎么实现图片放大缩小动画

      方法:1、使用“@keyframes动画名称{}”规则和“transform:scale(缩放比例);”语句创建放大缩小动画;2、使用“图片元素{animat...

    热门文章