rxjs里的Observable对象和map配合的一个用法

源代码：

import { of } from 'rxjs';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';@Injectable()
export class JerrySandBoxService{name = 'Jerry';print(){const observable = of(1, 2, 3);const opt = map(num => 'hello world: ' + num + ' done');const newObservable = opt(observable);newObservable.subscribe(data => console.log(data));}
}

执行结果：

map操作符接收的是一个箭头函数：

map内部的实现：返回一个新的名为mapOperation的函数，接受单参数。

现在执行opt操作：

source是Observable，project是应用开发人员指定的箭头函数：

Map operator的构造函数：

新建一个Observable对象，将当前Observable对象传给source，operator.project即箭头函数：

对新的Observable对象调用subscribe：

注意这种语法：把this里包含的operator对象赋值给大括号里的operator变量：

sink是subscriber，source是Observable，operator是箭头函数：

如果有operator，先执行箭头函数：

把箭头函数返回的结果，作为新的输入参数，传入到subscriber的next方法里：

最终执行调用subscribe时传入的箭头函数：

再看另一个例子：使用map优雅地消费一个API：


const http$ : Observable<Course[]> = this.http.get('/api/courses');http$.pipe(tap(() => console.log('HTTP request executed')),map(res => Object.values(res['payload']))).subscribe(courses => console.log("courses", courses));

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

rxjs里的Observable对象和map配合的一个用法相关推荐

rxjs里的Observable对象subscribe方法的执行原理
看个例子: const myObservable = of(1, 2, 3);// 创建一个观察者对象-Observer(处理next.error.complete回调)const myObserve ...
rxjs里的Observable对象如何消费
测试代码: import { of } from 'rxjs'; import { Injectable } from '@angular/core';@Injectable() export cla ...
通过一个最简单的例子，理解Angular rxjs里的Observable对象的pipe方法
源代码: import { of } from 'rxjs'; import { Injectable } from '@angular/core'; import { map } from 'rxj ...
rxjs of操作符生成的Observable对象的执行详细分析
代码: const a = of([1, 2, 3]); a.subscribe((data) => console.log('Fairy:' + data)); 单步调试,首先执行of所在的i ...
如何在Chrome调试器里检查嵌套Observable对象
一个例子: 举个例子,看如下这个嵌套的Observable对象: items$: Observable<Observable<Product>[]> = this.compon ...
从调试器里观察到的Observable对象反推出其赋值的源代码位置
展开Observable对象,从其operator能观察到施加在该Observable对象上的操作: Map操作:(event) => this.getBreakpoint(event.targ ...
rxjs里switchMap operators的用法
switchMap相关文章 rxjs里switchMap operators的用法通过rxjs的一个例子, 来学习SwitchMap的使用方法 rxjs switchMap的实现原理 rxjs的ma ...
rxjs 里的pipe operator
源代码: const a = of([1, 2, 3]);const b = map((data: number[]) => {for( let i = 0; i < data.lengt ...
rxjs里scan operator的执行研究
源代码: ngOnInit(): void {console.log('before ngOnInit');const source$ = range(0, 10);source$.pipe(/*fi ...

rxjs里的Observable对象和map配合的一个用法

rxjs里的Observable对象和map配合的一个用法相关推荐

最新文章

热门文章