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