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