資訊專欄INFORMATION COLUMN
摘要：本文是響應(yīng)式編程第四章構(gòu)建完整的應(yīng)用程序這篇文章的學(xué)習(xí)筆記。涉及的運(yùn)算符每隔指定時(shí)間將流中的數(shù)據(jù)以數(shù)組形式推送出去。中提供了一種叫做異步管道的模板語(yǔ)法，可以直接在的微語(yǔ)法中使用可觀測(cè)對(duì)象示例五一點(diǎn)建議一定要好好讀官方文檔。
本文是【Rxjs 響應(yīng)式編程-第四章 構(gòu)建完整的Web應(yīng)用程序】這篇文章的學(xué)習(xí)筆記。示例代碼托管在：http://www.github.com/dashnowords/blogs
博客園地址：《大史住在大前端》原創(chuàng)博文目錄
華為云社區(qū)地址：【你要的前端打怪升級(jí)指南】
[TOC]
一. 劃重點(diǎn)RxJS-DOM
原文示例中使用這個(gè)庫(kù)進(jìn)行DOM操作，筆者看了一下github倉(cāng)庫(kù)，400多星，而且相關(guān)的資料很少，所以建議理解思路即可，至于生產(chǎn)環(huán)境的使用還是三思吧。開發(fā)中Rxjs幾乎默認(rèn)是和Angular技術(shù)棧綁定在一起的，筆者最近正在使用ionic3進(jìn)行開發(fā)，本篇將對(duì)基本使用方法進(jìn)行演示。
冷熱Observable
冷Observable從被訂閱時(shí)就發(fā)出整個(gè)值序列
熱Observable無(wú)論是否被訂閱都會(huì)發(fā)出值，機(jī)制類似于javascript事件。
涉及的運(yùn)算符
bufferWithTime(time:number)-每隔指定時(shí)間將流中的數(shù)據(jù)以數(shù)組形式推送出去。
pluck(prop:string)- 操作符，提取對(duì)象屬性值，是一個(gè)柯里化后的函數(shù)，只接受一個(gè)參數(shù)。
二. Angular應(yīng)用中的Http請(qǐng)求Angular應(yīng)用中基本HTTP請(qǐng)求的方式:
import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";
import { MessageService } from "./message.service";//某個(gè)自定義的服務(wù)
import { HttpClient, HttpParams, HttpResponse } from "@angular/common/http";
@Injectable({
providedIn: "root"
})
export class HeroService {
private localhost = "http://localhost:3001";
private all_hero_api = this.localhost + "/hero/all";//查詢所有英雄
private query_hero_api = this.localhost + "/hero/query";//查詢指定英雄
constructor(private http:HttpClient) {
}
/*一般get請(qǐng)求*/
getHeroes(): Observable>{
return this.http.get(this.all_hero_api,{observe:"response"});
}
/*帶參數(shù)的get請(qǐng)求*/
getHero(id: number): Observable>{
let params = new HttpParams();
params.set("id", id+"");
return this.http.get(this.query_hero_api,{params:params,observe:"response"});
}
/*帶請(qǐng)求體的post請(qǐng)求，any可以自定義響應(yīng)體格式*/
createHero(newhero: object): Observable>{
return this.http.post>(this.create_hero_api,{data:newhero},{observe:"response"});
}
}
在express中寫一些用于測(cè)試的虛擬數(shù)據(jù):
var express = require("express");
var router = express.Router();
/* GET home page. */
router.get("/all", function(req, res, next) {
let heroes = [{
index:1,
name:"Thor",
hero:"God of Thunder"
},{
index:2,
name:"Tony",
hero:"Iron Man"
},{
index:3,
name:"Natasha",
hero:"Black Widow"
}]
res.send({
data:heroes,
result:true
})
});
/* GET home page. */
router.get("/query", function(req, res, next) {
console.log(req.query);
let hero= {
index:4,
name:"Steve",
hero:"Captain America"
}
res.send({
data:hero,
result:true
})
});
/* GET home page. */
router.post("/create", function(req, res, next) {
console.log(req.body);
let newhero = {
index:5,
name:req.body.name,
hero:"New Hero"
}
res.send({
data:newhero,
result:true
})
});
module.exports = router;
在組件中調(diào)用上面定義的方法：
sendGet(){
this.heroService.getHeroes().subscribe(resp=>{
console.log("響應(yīng)信息:",resp);
console.log("響應(yīng)體:",resp.body["data"]);
})
}
sendQuery(){
this.heroService.getHero(1).subscribe(resp=>{
console.log("響應(yīng)信息:",resp);
console.log("響應(yīng)體:",resp.body["data"]);
})
}
sendPost(){
this.heroService.createHero({name:"Dash"}).subscribe(resp=>{
console.log("響應(yīng)信息:",resp);
console.log("響應(yīng)體:",resp.body["data"]);
})
}
控制臺(tái)打印的信息可以看到后臺(tái)的虛擬數(shù)據(jù)已經(jīng)被請(qǐng)求到了：
三. 使用Rxjs構(gòu)建Http請(qǐng)求結(jié)果的處理管道 3.1 基本示例盡管看起來(lái)Http請(qǐng)求的返回結(jié)果是一個(gè)可觀測(cè)對(duì)象，但是它卻沒有map方法，當(dāng)需要對(duì)http請(qǐng)求返回的可觀測(cè)對(duì)象進(jìn)行操作時(shí)，可以使用pipe操作符來(lái)實(shí)現(xiàn)：
import { Observable, of, from} from "rxjs";
import { map , tap, filter, flatMap }from "rxjs/operators";
/*構(gòu)建一個(gè)模擬的結(jié)果處理管道
*map操作來(lái)獲取數(shù)據(jù)
*tap實(shí)現(xiàn)日志
*flatMap實(shí)現(xiàn)結(jié)果自動(dòng)遍歷
*filter實(shí)現(xiàn)結(jié)果過濾
*/
getHeroes$(): Observable>{
return this.http.get(this.all_hero_api,{observe:"response"})
.pipe(
map(resp=>resp.body["data"]),
tap(this.log),
flatMap((data)=>{return from(data)}),
filter((data)=>data["index"] > 1)
);
}
很熟悉吧？經(jīng)過處理管道后，一次響應(yīng)中的結(jié)果數(shù)據(jù)被轉(zhuǎn)換為逐個(gè)發(fā)出的數(shù)據(jù)，并過濾掉了不符合條件的項(xiàng)：
3.2 常見的操作符Angular中文網(wǎng)列舉了最常用的一些操作符,RxJS官方文檔有非常詳細(xì)的示例及說明，且均配有形象的大理石圖，建議先整體瀏覽一下有個(gè)印象，有需要的讀者可以每天熟悉幾個(gè)，很快就能上手，運(yùn)算符的使用稍顯抽象，且不同運(yùn)算符的組合使用在流程控制和數(shù)據(jù)處理方面的用法靈活多變，也是有很多套路的，開發(fā)經(jīng)驗(yàn)需要慢慢積累。
四. 冷熱Observable的兩種典型場(chǎng)景原文中提到的冷熱Observable的差別可以參考這篇文章【RxJS：冷熱模式的比較】，概念本身并不難理解。
4.1 shareReplay與請(qǐng)求緩存開發(fā)中常會(huì)遇到這樣一種場(chǎng)景，某些集合型的常量，完全是可以復(fù)用的，通常開發(fā)者會(huì)將其進(jìn)行緩存至某個(gè)全局單例中，接著在優(yōu)化階段，通過增加一個(gè)if判斷在請(qǐng)求之前先檢查緩存再?zèng)Q定是否需要請(qǐng)求，Rxjs提供了一種更優(yōu)雅的實(shí)現(xiàn)。
先回顧一下上面的http請(qǐng)求代碼:
