摘要：最近有同學(xué)在使用時(shí)總是不能如愿拿到自己想要的數(shù)據(jù)，說到底還是沒有能把思維從命令式的習(xí)慣中轉(zhuǎn)換過來。響應(yīng)式的編程風(fēng)格中，數(shù)據(jù)應(yīng)該在流內(nèi)完成轉(zhuǎn)換，合并，過濾，而不是取出來，一頓操作再丟回流里。
最近有同學(xué)在使用rxjs時(shí)總是不能如愿拿到自己想要的數(shù)據(jù)，說到底還是沒有能把思維從命令式的習(xí)慣中轉(zhuǎn)換過來。
Observable !== 異步 && Observable !== 同步
如題，請(qǐng)默念幾遍！在（一）里面其實(shí)就提到過，Observable里的數(shù)據(jù)到底是同步的還是異步取決于你如何使用，這和promise是完全不同的，promise不論你如果使用，它始終是異步的。上代碼：
dataSource: DataSource;
ngOnInit() {
this.getDataSource()
.subscribe(data => {
console.log("in subscribe: ",data);
this.dataSource = data;
})
console.log("after subscribe:", this.dataSource);
}
getDataSource(): Observable> {
return this.stockService.getStocksMat()
.pipe(
map(stocks => new StockTbDataSource(this.paginator, this.sort, stocks))
);
};
請(qǐng)問，以上2個(gè)console，哪個(gè)先輸出，哪個(gè)后輸出？正確答應(yīng)該是，鬼知道！仔細(xì)分析代碼，這個(gè)數(shù)據(jù)是從stockService上獲取到的，那么數(shù)據(jù)是同步還是異步就取決于這個(gè)服務(wù)的 getStocksMat 方法。
import { of } from "rxjs";
export class StockService {
getStocksMat(): Observable> {
return of({name: "a", price: 100});
}
}
現(xiàn)在呢，毫無疑問，這個(gè)時(shí)候數(shù)據(jù)是同步的，因?yàn)榉?wù)的方法中使用of操作符創(chuàng)建了一個(gè) Observable，of操作符的行為是會(huì)把傳入它的參數(shù)依次推送到流上，最后發(fā)出完成通知。所以，以上兩個(gè)console的輸出順序應(yīng)該是 inner 先輸出，after 后輸出。
注意：也不要把操作符和同步異步劃等號(hào)，同樣也和你如何使用它有關(guān)系，這個(gè)系列里一直沒有提到的一個(gè)東西叫 scheduler，也就是調(diào)度器，它可以調(diào)節(jié)流上的值如何發(fā)射
import { asyncScheduler } from "rxjs";
of({name: "a", price: 100}, asyncScheduler); // 此時(shí)流上的數(shù)據(jù)將被異步發(fā)出。
假如service上的代碼變成：
export class StockService {
constructor(private http: HttpClient) { }
getStocksMat(): Observable> {
return this.http.get(someUrl).pipe(
map(res => res.data)
);
}
}
很顯然，我們是想從服務(wù)器上取一段數(shù)據(jù)回來，那么這個(gè)過程肯定是異步的，所以那2個(gè)console的輸出順序就應(yīng)該是 after 先輸出，而inner 后輸出。
盡量不要主動(dòng)訂閱流
這里指的是在angular里，因?yàn)閍ngular給我們提供了取數(shù)據(jù)的 pipe - async。它可以幫助我們?cè)谀０逯邪褦?shù)據(jù)取出來，當(dāng)然就是訂閱我們給它的 Observable。不主動(dòng)訂閱的原因如下：
當(dāng)訂閱流時(shí)，會(huì)產(chǎn)生 subscription，當(dāng)然使用 async pipe 時(shí)也會(huì)有，但此時(shí)框架會(huì)幫我們管理它，當(dāng)不需要再訂閱時(shí)取消訂閱，如模板銷毀時(shí)。
如果我們手動(dòng)訂閱的是一個(gè)會(huì)發(fā)出結(jié)束通知的流時(shí)，rxjs的底層會(huì)幫我們?cè)诹魃系臄?shù)據(jù)發(fā)送完成時(shí)取消訂閱，反之則不會(huì)。也就是說第一，你需要準(zhǔn)確判斷訂閱的流是否會(huì)發(fā)出結(jié)束通知。第二，你可能需要在合適的時(shí)機(jī)手動(dòng)取消訂閱。
響應(yīng)式的編程風(fēng)格中，數(shù)據(jù)應(yīng)該在流內(nèi)完成轉(zhuǎn)換，合并，過濾，而不是取出來，一頓操作再丟回流里。
如下
export class StockService {
constructor(private http: HttpClient) { }
getStocksMatArr(): Observable[]> {
return this.http.get(someUrl).pipe(
map(res => res.data)
);
}
// 只要價(jià)格大于某個(gè)值的股票
getStocksThatPriceLargeThan(price: number): Observable[]> {
return this.getStocksMatArr().pipe(
filter(stocks => stocks.filter(stock => stock.price > price))
)
}
// 和另外一些流上的數(shù)據(jù)組合，比如購買人數(shù)；
getStocksWithBuyCount(): Observable<{stocks: DataSource[]; count: number}> {
const count$ = of(2000);
return this.getStocksMatArr().pipe(
withLatestFrom(count$, (stocks, count) => ({stocks, count}))
);
}
// 當(dāng)然還可以更復(fù)雜
showExample(): Observable {
return this.getStocksMatArr().pipe(
mergeMap(stocks => from(stocks)), // 先把stock逐個(gè)放到流上
filter(stock => stock.price < 50), // 過濾出來
take(10), // 拿前10支股票
withLatestFrom(obs), // 和另一條流的上數(shù)據(jù)組合
bufferCount(2), // 兩兩組合
reduce((acc, cur) => [...acc, cur], []) // 再合并起來
delay(2000), // 延遲2秒再發(fā)
... 等等， 一切取決于你的需求。
)
}
}
只要保持?jǐn)?shù)據(jù)一直在流中，你就不必時(shí)時(shí)惦記著它到底是同步還異步，數(shù)據(jù)來了就消費(fèi)，沒來就一直等。剛開始時(shí)建議強(qiáng)迫自己不去訂閱，這樣才能很快的理解和適應(yīng)響應(yīng)式的風(fēng)格。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97258.html
