源代碼：

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));} }

執(zhí)行結(jié)果：

map操作符接收的是一個箭頭函數(shù)：

map內(nèi)部的實現(xiàn)：返回一個新的名為mapOperation的函數(shù)，接受單參數(shù)。

現(xiàn)在執(zhí)行opt操作：

source是Observable，project是應(yīng)用開發(fā)人員指定的箭頭函數(shù)：

Map operator的構(gòu)造函數(shù)：

新建一個Observable對象，將當前Observable對象傳給source，operator.project即箭頭函數(shù)：

對新的Observable對象調(diào)用subscribe：

注意這種語法：把this里包含的operator對象賦值給大括號里的operator變量：

sink是subscriber，source是Observable，operator是箭頭函數(shù)：

如果有operator，先執(zhí)行箭頭函數(shù)：

把箭頭函數(shù)返回的結(jié)果，作為新的輸入?yún)?shù)，傳入到subscriber的next方法里：

最終執(zhí)行調(diào)用subscribe時傳入的箭頭函數(shù)：

再看另一個例子：使用map優(yōu)雅地消費一個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的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的rxjs里的Observable对象和map配合的一个用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。