LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

深入淺出JavaScript庫---RxJS

admin
2024年11月11日 19:36 本文熱度 106

前言

這個庫在angular中已經(jīng)集成了,所以使用起來有良好的代碼提示,但是在Vue中不行,一點提示都沒有,下面的代碼都在Vue項目中使用,以此分享自己在學(xué)習(xí)的體會:

一、初始RxJS

(1)安裝與導(dǎo)入

命令

npm install rxjs

按需導(dǎo)入:

import { Observer } from "rxjs";

(2)Observable的工作

說明:?Observable可以理解成被觀察者,Observer就是觀察者,連接兩者的橋梁就是Observable對象的函數(shù)subscribe,同時RxJS中的數(shù)據(jù)流就是Observable對象,它實現(xiàn)了觀察者模式和迭代器模式,這里聊聊前者。

=> 觀察者模式 <=

解決問題:?它需要解決在一個持續(xù)產(chǎn)生事件的系統(tǒng)中,如何分割功能,讓不同模塊只需要處理一部分邏輯。

解決方法:?將邏輯分為發(fā)布者和觀察者,發(fā)布者只管生產(chǎn)事件,之后將事件上注冊一個觀察者,至于事件如何被觀察者處理它不關(guān)心;同樣觀察者只管將接收到的事件處理掉,不關(guān)心它是如何產(chǎn)生的。

與RxJS的聯(lián)系:?Observable對象就是一個發(fā)布者,通過函數(shù)subscribe將其與觀察者Observer聯(lián)系起來。

import { of } from "rxjs";
// of操作符會返回一個observable對象,將傳入的內(nèi)容依次發(fā)射出來;
// 此時scoure$就是一個發(fā)布者,它產(chǎn)生的事件就是三個整數(shù)
const scoure$ = of(1, 2, 3);
// 這里console.log作為觀察者,將傳給它的內(nèi)容輸出出來,
// 不管數(shù)據(jù)是怎么產(chǎn)生的
scoure$.subscribe(console.log);
處理步驟:
產(chǎn)生事件:這是發(fā)布者的責(zé)任,也就是Observable對象的工作。?響應(yīng)事件:這是觀察者的責(zé)任,也就是由subscribe的參數(shù)決定。 發(fā)布者如何關(guān)聯(lián)觀察者:也就是何時調(diào)用subscribe。

=> 迭代器模式 <=

說明:?它提供一個通用的接口來遍歷數(shù)據(jù)集合的對象,并且讓使用者不用關(guān)心這個數(shù)據(jù)集合是如何實現(xiàn)的。從數(shù)據(jù)消費的角度,迭代器實現(xiàn)分為拉和推兩種,簡單理解就是拉取數(shù)據(jù)和推送數(shù)據(jù),RxJS屬于后者,它作為迭代器的使用者,并不需要主動去從Observable 中拉數(shù)據(jù),而是只要subscribe上Observable對象之后,然后就能夠收到消息的推送。

=> 創(chuàng)造Observable <=

執(zhí)行過程:?創(chuàng)建一個Observable,也就是創(chuàng)建一個發(fā)布者,這個發(fā)布者接收一個onSubscribe用于與觀察者產(chǎn)生聯(lián)系,當(dāng)發(fā)布者通過subscribe將其注冊給觀察者后,這個函數(shù)就會執(zhí)行,函數(shù)的參數(shù)就是觀察者對象,對這個對象的唯一要求就是需要存在next屬性,屬性的值是一個函數(shù),用來接收傳過來的數(shù)據(jù)

// 0.用于定義發(fā)布者
import { Observable } from "rxjs";
// 4.觸發(fā)后這個函數(shù)的參數(shù)是觀察者的一個包裝,
// ? 它與觀察者并不等價
const onSubscribe = (observer) => {
 ?observer.next(1);
 ?observer.next(2);
 ?observer.next(3);
};
// 1.這里創(chuàng)建一個發(fā)布者,它存在一個onSubscribe函數(shù)與
// ? 觀察者產(chǎn)生聯(lián)系
const source$ = new Observable(onSubscribe);
// 2.創(chuàng)建一個觀察者,有一個next屬性用于接收傳過來的值
const theObserver = {
 ?next: (item) => console.log(item),
};
// 3.通過subscribe函數(shù)將發(fā)布者和觀察者聯(lián)系起來,此時發(fā)
// ? 布者中的onSubscribe函數(shù)會被觸發(fā)
source$.subscribe(theObserver);


=> 延遲的Observable <=

舉例:?如何讓上面的例子中推送每個正整數(shù)之間有一定的時間間隔?

思考:?這個邏輯放在哪個部分更合適?

解釋:?按照分工,發(fā)布者產(chǎn)生數(shù)據(jù),觀察者處理數(shù)據(jù),這樣一來發(fā)布者控制推送數(shù)據(jù)的節(jié)奏也很合理。

const onSubscribe = (observer) => {
 ?let number = 1;
 ?const handle = setInterval(() => {
 ? ?observer.next(number++);
 ? ?if (number > 3) {
 ? ? ?clearInterval(handle);
 ? ?}
 ?}, 1000);
};

結(jié)論:?發(fā)布者推送數(shù)據(jù)可以有時間間隔,這樣使得異步操作十分容易,因為對于觀察者,只需要被動接受推送數(shù)據(jù)來處理,再不用關(guān)心數(shù)據(jù)何時產(chǎn)生。

=> 永無止境的Observable <=

說明:?其實發(fā)布者發(fā)射的數(shù)據(jù)可以是無窮的,每次發(fā)布者使用next發(fā)射出一個數(shù)據(jù),這個數(shù)據(jù)會被觀察者接收然后消化掉,所以不會存在數(shù)據(jù)堆積;如果發(fā)布者的next方法停止調(diào)用,只能表示發(fā)布者此時不會發(fā)射數(shù)據(jù)出去,但并不代表之后不會發(fā)射數(shù)據(jù);如果需要明確發(fā)布就不會再有新數(shù)據(jù)產(chǎn)生了,還需要多個Observable完結(jié)的方式

const onSubscribe = (observer) => {
 ?let number = 1;
 ?const handle = setInterval(() => {
 ? ?observer.next(number++);
 ?}, 1000);
};

=> Observable的完結(jié) <=

說明:?觀察者的next方法只能表示現(xiàn)在推送的數(shù)據(jù)是什么,并不能表示后面沒有更多數(shù)據(jù)了,也就是沒辦法完全停止它推送數(shù)據(jù),但是在RxJS中,可以使用觀察者的complete方法來完成。

import { Observable } from "rxjs";
const onSubscribe = (observer) => {
 ?let number = 1;
 ?const handle = setInterval(() => {
 ? ?observer.next(number++);
 ? ?if (number > 3) {
 ? ? ?clearInterval(handle);
 ? ? ?// 使用函數(shù)完全停止數(shù)據(jù)的發(fā)送
 ? ? ?observer.complete();
 ? ?}
 ?}, 1000);
};
const source$ = new Observable(onSubscribe);
const theObserver = {
 ?next: (item) => console.log(item),
 ?// 定義函數(shù)來讓發(fā)布者完全停止數(shù)據(jù)的傳輸
 ?complete: () => console.log("No More Data"),
};
source$.subscribe(theObserver);


=> 錯誤的Observable <=

說明:?理想情況下,發(fā)布者只管生產(chǎn)數(shù)據(jù)給觀察者來消耗,但是,難免有時候發(fā)布者會遇到了異常情況,而且這種異常情況不是生產(chǎn)者所能夠處理并恢復(fù)正常的,發(fā)布者在這時候沒法再正常工作了,就需要通知對應(yīng)的觀察者發(fā)生了這個異常情況,如果只是簡單地調(diào)用 complete,觀察者只會知道沒有更多數(shù)據(jù),卻不知道沒有更多數(shù)據(jù)的原因是因為遭遇了異常,所以,我們還要在發(fā)布者和觀察者的交流渠道中增加一個新的函數(shù)error。

import { Observable } from "rxjs/Observable";
const onSubscribe = (observer) => {
 ?observer.next(1);
 ?// 此時發(fā)布者出現(xiàn)不能自己解決的錯誤,調(diào)用方法通知觀察者,
 ?// 此時發(fā)布者已經(jīng)進(jìn)入完結(jié)的狀態(tài),后面所調(diào)用的next和complete
 ?// 都會失效
 ?observer.error("Someting Wrong");
 ?observer.complete();
};
const source$ = new Observable(onSubscribe);
const theObserver = {
 ?next: (item) => console.log(item),
 ?// 用來處理錯誤信息
 ?error: (err) => console.log(err),
 ?complete: () => console.log("No More Data"),
};
source$.subscribe(theObserver);
在RxJS中,一個發(fā)布者對象只有一種終結(jié)狀態(tài),要么是complete,要么是error,一旦進(jìn)入出錯狀態(tài),這個發(fā)布者對象也就終結(jié)了,再不會調(diào)用對應(yīng)觀察者的next函數(shù),也不會再調(diào)用觀察者的complete函數(shù);同樣,如果一個發(fā)布者對象進(jìn)入了完結(jié)狀態(tài),也不能再調(diào)用觀察者的next和error。
此外,一個觀察者對象,里面可以存在next、error、complete三個方法,用于接受發(fā)布者的三種不同事件,如果不關(guān)心某種事件,可以不實現(xiàn)對應(yīng)的方法;比如對于一個永遠(yuǎn)不會結(jié)束的發(fā)布者, 真的沒有必要提供complete方法,因為它永遠(yuǎn)不會被調(diào)用到;但是對于錯誤,觀察者是無法察覺發(fā)布者會出現(xiàn)什么錯情況的,所以error方法還是需要。

(3)退訂Observable

說明:?有時候需要斷開發(fā)布者與觀察者之間的聯(lián)系,這個操作就叫做退訂,在發(fā)布者的onSubscribe函數(shù)執(zhí)行的時候,它可以返回一個對象,對象上可以有一個unsubscribe函數(shù),執(zhí)行這個函數(shù)來進(jìn)行退訂操作。

import { Observable } from "rxjs";
const onSubscribe = (observer) => {
 ?let number = 1;
 ?const handle = setInterval(() => {
 ? ?observer.next(number++);
 ?}, 1000);
 ?return {
 ? ?unsubscribe: () => {
 ? ? ?clearInterval(handle);
 ? ?},
 ?};
};
const source$ = new Observable(onSubscribe);
const subscription = source$.subscribe((item) => console.log(item));
setTimeout(() => {
 ?subscription.unsubscribe();
}, 3500);

注意:?退訂函數(shù)執(zhí)行后,表示觀察者不再接受發(fā)布者推送的數(shù)據(jù),但是發(fā)布者并沒有停止推送數(shù)據(jù),因為發(fā)布者并沒有到達(dá)終結(jié)狀態(tài),也就是沒有調(diào)用complete或者是error方法,此時只是發(fā)布者推送的數(shù)據(jù)觀察者不接收而已,看下面的例子:

import { Observable } from "rxjs";
const onSubscribe = (observer) => {
 ?let number = 1;
 ?const handle = setInterval(() => {
 ? ?// 將發(fā)布者發(fā)射的數(shù)據(jù)打印出來
 ? ?console.log("in onSubscribe ", number);
 ? ?observer.next(number++);
 ?}, 1000);
 ?return {
 ? ?unsubscribe: () => {
 ? ? ?// 這里不清除定時器,讓發(fā)布者繼續(xù)產(chǎn)生數(shù)據(jù)
 ? ? ?// clearInterval(handle);
 ? ?},
 ?};
};
const source$ = new Observable(onSubscribe);
// 每次觀察者執(zhí)行的時候打印出收到的數(shù)據(jù)
const subscription = source$.subscribe((item) => console.log(item));
setTimeout(() => {
 ?subscription.unsubscribe();
}, 3500);
發(fā)布者產(chǎn)生的事件,只有觀察者通過訂閱之后才會收到,在退訂之后就不會收到。

(4)了解兩種Observable

說明:?這里介紹的是Hot Observable和Cold Observable。

場景:?假設(shè)每個發(fā)布者對象有兩個觀察者對象來訂閱, 而且這兩個觀察者對象并不是同時訂閱,第一個觀察者對象訂閱N秒鐘之后,第二個觀察者對象才訂閱同一個發(fā)布者對象,而且,在這N秒鐘之內(nèi),發(fā)布者對象已經(jīng)吐出了一些數(shù)據(jù),此時對這吐出的數(shù)據(jù)有兩種處理:

Hot Observable:只需要接受從訂閱那一刻開始發(fā)布者產(chǎn)生的數(shù)據(jù)就行;有點類似在電視上面看節(jié)目,你所看到的內(nèi)容是節(jié)目當(dāng)前這一刻開始的,之前的節(jié)目你是看不見的,假如你的家人跟你一起看,那么你們看到的節(jié)目是一樣的,這就可以理解為獲取數(shù)據(jù)的數(shù)據(jù)源是相同的 Cold Observable:不能錯過,需要獲取發(fā)布者之前產(chǎn)生的數(shù)據(jù),也就是每次都需要獲取發(fā)布者完整的數(shù)據(jù),可以理解為每次得到的數(shù)據(jù)與之前的數(shù)據(jù)之間并不存在聯(lián)系,是相互獨立的,也就是每次會得到獨立的數(shù)據(jù)源,就像你在手機(jī)應(yīng)用市場下載游戲,跟你在同樣地方下載的游戲是一樣的。

理解:?那么就可以得到這樣的結(jié)果,如果Cold Observable沒有訂閱者,數(shù)據(jù)不會真正的產(chǎn)生,就像你如果不主動下載游戲,你手機(jī)上不可能玩到的;而對于Hot Observable在沒有訂閱者的時候,數(shù)據(jù)依然產(chǎn)生,只不過不傳入數(shù)據(jù)管道而已,就像電視機(jī)節(jié)目,節(jié)目一直存在與此,只是你沒切換到那個頻道觀看而已。

(5)操作符簡介

說明:?一個發(fā)布者對象就是一個數(shù)據(jù)流,在RxJS中數(shù)據(jù)流一般使用$開頭來命名;在一個復(fù)雜問題里面,數(shù)據(jù)流并不會直接交給觀察者來處理,在這途中會使用一系列內(nèi)置的函數(shù)來處理數(shù)據(jù),這些函數(shù)可以理解為操作符;就像一個管道,數(shù)據(jù)從管道的一段流入,途徑管道各個環(huán)節(jié),當(dāng)數(shù)據(jù)到達(dá)觀察者的時候,已經(jīng)被管道操作過,有的數(shù)據(jù)已經(jīng)被中途過濾拋棄掉了,有的數(shù)據(jù)已經(jīng)被改變了原來的形態(tài),而且最后的數(shù)據(jù)可能來自多個數(shù)據(jù)源,最后觀察者只需要處理能夠達(dá)到終點的數(shù)據(jù)。

說明:?在數(shù)據(jù)管道中流淌的數(shù)據(jù)就像是水,從上游流向下游。對一個操作符來說,上游可能是一個數(shù)據(jù)源,也可能是其他操作符,下游可能是最終的觀察者,也可能是另一個操作符,每一個操作符之間都是獨立的,正因為如此,所以可以對操作符進(jìn)行任意組合,從而產(chǎn)生各種功能的數(shù)據(jù)管道。


6)理解彈珠圖

作用:?RxJS中每一個發(fā)布者是一個數(shù)據(jù)流,簡單的數(shù)據(jù)流可以由大腦想象出來,但是復(fù)雜的可就不好像了,此時就可以使用彈珠圖來具體的方式來描述數(shù)據(jù)流,看兩張圖:

說明:?這個彈珠圖所表示的數(shù)據(jù)流,每間隔一段時間吐出一個遞增的正整數(shù),吐出到3的時候結(jié)束。因為每一個吐出來的數(shù)據(jù)都像是一個彈珠,所以這種表達(dá)方式叫做彈珠圖。在彈珠圖中,每個彈珠之間的間隔,代表的是吐出數(shù)據(jù)之間的時間間隔,通過這種形式,能夠很形象地看清楚每個發(fā)布者對象中數(shù)據(jù)的分布。 根據(jù)彈珠圖的傳統(tǒng),豎杠符號|代表的是數(shù)據(jù)流的完結(jié),對應(yīng)調(diào)用complete函數(shù),數(shù)據(jù)流吐出數(shù)據(jù)3之后立刻就完結(jié)了。 符號×代表數(shù)據(jù)流中的異常,對應(yīng)于調(diào)用下游的error函數(shù)。

注意:?為了描述操作符的功能,彈珠圖中往往會出現(xiàn)多條時間軸,因為各部分操作符的工作都是把上游的數(shù)據(jù)轉(zhuǎn)為傳給下游的數(shù)據(jù),在彈珠圖上必須把上下游的數(shù)據(jù)流都展現(xiàn)出來,此外,編寫彈珠圖可以去此處,后面如果存在彈珠圖的地方所使用的代碼復(fù)制到此處就可以看到了。

二、實現(xiàn)操作符

理解:?一個操作符是返回一個Observable對象的函數(shù),不過,有的操作符是根據(jù)其他Observable對象產(chǎn)生返回的Observable對象,有的操作符則是利用其他類型輸出產(chǎn)生返回的Observable對象,還有一些操作符不需要輸出就可以憑空創(chuàng)造一個Observable對象,這里以實現(xiàn)一個操作符來慢慢理解什么是操作符。

(1)實現(xiàn)操作符函數(shù)

說明:?每一個操作符是一個函數(shù),不管函數(shù)的功能是怎樣的,它需要包含以下功能點,這里實現(xiàn)map操作符為例

返回?個全新的Observable對象。 需要存在訂閱和退訂的操作。 處理異常情況。 及時釋放資源。

=> 返回Observable對象 <=

分析:?首先map操作符的功能是遍歷得到的數(shù)據(jù),通過傳入的參數(shù)函數(shù)來處理這些數(shù)據(jù),看下面的例子:

// 這里的函數(shù)參數(shù)將數(shù)據(jù)的每一個值都乘以2,
// 如果source$是?個 1、2、3的序列,
// 那么map返回的序列就是2、4、6,根據(jù)函數(shù)式編程的原則,
// map函數(shù)是不會修改原始的數(shù)據(jù)的,同時其返回值是?個全
// 新的Observable對象,這樣可以保持原始Observable對象的狀態(tài)
// 避免不可預(yù)料的行為
const result$ = source$.map(x => x * 2);

實現(xiàn):?根據(jù)上面的分析可以得到下面這個函數(shù)

// 這里的project就是傳遞給map操作符的函數(shù)參數(shù)
function map(project) {
 ?// map中利?new關(guān)鍵字創(chuàng)造了?個Observable對象,
 ?// 函數(shù)返回的結(jié)果就是這個對象,如此?來,
 ?// map可以?于鏈?zhǔn)秸{(diào)?,可以在后?調(diào)?其他的操作符,
 ?// 或者調(diào)?subscribe增加Observer。
 ?return new Observable((observer) => {
 ? ?// 假設(shè)此處this表示發(fā)布者對象,訂閱后數(shù)據(jù)就會交給觀察者了
 ? ?this.subscribe({
 ? ? ?next: (value) => observer.next(project(value)),
 ? ? ?error: (err) => observer.error(error),
 ? ? ?complete: () => observer.complete(),
 ? ?});
 ?});
}

=> 退訂處理 <=

說明:?作為一個通用的操作符,無法預(yù)料上游Observable是如何實現(xiàn)的,上游完全可能在被訂閱時分配了特殊資源,如果不明確地告訴上游這些資源再也用不著了的話,它也不會釋放這些資源,此時就會造成資源的泄露,所以下游退訂那些資源,就要告訴上游退訂那些資源。

function map(project) {
 ?return new Observable((observer) => {
 ? ?const sub = this.subscribe({
 ? ? ?next: (value) => observer.next(project(value)),
 ? ? ?error: (err) => observer.error(error),
 ? ? ?complete: () => observer.complete(),
 ? ?});
 ? ?return {
 ? ? ?// 根據(jù)前面的了解這里需要存在一個unsubscribe
 ? ? ?// 方法用于退訂
 ? ? ?unsubscribe: () => {
 ? ? ? ?sub.unsubscribe();
 ? ? ?},
 ? ?};
 ?});
}

=> 處理異常 <=

說明:?上面代碼中的參數(shù)project可以輸入的情況有很多,可能存在執(zhí)行的時候不合理的代碼,此時就會出現(xiàn)異常,此時需要捕獲異常錯誤,把異常錯誤沿著數(shù)據(jù)流往下游傳遞,最終如何處理交給觀察者來決定。

function map(project) {
 ?return new Observable((observer) => {
 ? ?const sub = this.subscribe({
 ? ? ?next: (value) => {
 ? ? ? ?try {
 ? ? ? ? ?observer.next(project(value));
 ? ? ? ?} catch (err) {
 ? ? ? ? ?observer.error(err);
 ? ? ? ?}
 ? ? ?},
 ? ? ?error: (err) => observer.error(error),
 ? ? ?complete: () => observer.complete(),
 ? ?});
 ? ?return {
 ? ? ?unsubscribe: () => {
 ? ? ? ?sub.unsubscribe();
 ? ? ?},
 ? ?};
 ?});
}

(2)關(guān)聯(lián)Observable

使用原型:?這個操作符在使用的時候需要一個Observable對象實例,因此這個操作符是一個實例操作符,此時使用打補(bǔ)丁的方式關(guān)聯(lián)發(fā)布者對象的格式為Observable.prototype.操作符 = 操作符函數(shù),既然有實例操作符,當(dāng)然也有靜態(tài)操作符,它不需要Observable實例就可以使用,它的打補(bǔ)丁的格式為Observable.操作符 = 操作符函數(shù),這個的弊端在于會影響每一個Observable對象。

Observable.prototype.map = map;

使用call和bind:?解決上面的問題,可以讓我們?定義的操作符只對指定的 Observable對象可?,這時就可以?bind,當(dāng)然也可以使用call。

// 一般使用
const result$ = map.bind(Observable對象)(x => x * 2);
// 鏈?zhǔn)秸{(diào)用
const result$ = map.bind(
 ? ? ? ? ? ? ? ? ? ?map.bind(Observable對象)((x) => x * 2)
 ? ? ? ? ? ? ? ?)((x) => x + 1);
// 一般使用
onst result$ = map.call(Observable對象, x => x * 2);
// 鏈?zhǔn)秸{(diào)用
const result$ = map.call(
 ? ?map.call(Observable對象, (x) => x * 2),
 ? ?(x) => x * 2
);

3)改進(jìn)操作符

說明:?如果遵循函數(shù)式編程思想,需要使用純函數(shù),也就是函數(shù)執(zhí)行的結(jié)果完全由輸入的參數(shù)決定,但是上面定義的函數(shù)中存在this,這是一個不確定的因素,也就是這個函數(shù)不屬于純函數(shù)了,所以在此處需要改進(jìn)一下。

=> 缺陷 <=

說明:?在現(xiàn)代網(wǎng)頁開發(fā)的過程中,都會經(jīng)過打包才發(fā)布到產(chǎn)品環(huán)境,在打包的過程中會使用Tree-Shaking這個工具來去除代碼中沒有使用的代碼,比如那些引入的變量但是并沒有使用這種的;但是這個工具對于RxJS來說沒什么用,這是因為Tree Shaking只能做靜態(tài)代碼檢查,并不是在程序運行時去檢測這個函數(shù)是否被真的調(diào)用,只有這個函數(shù)在任何代碼中間都沒有引用過,才認(rèn)為這個函數(shù)不會被引用。然而,RxJS中任何一個操作符都是掛在 Observable類上或者Observable.prototype上的,賦值給Observable或者 Observable.prototype上某個屬性在Tree Shaking看來就是被引用,所以,所有的操作符,不管真實運用時是否被調(diào)用,都會被Tree Shaking認(rèn)為是會用到的代碼,也就不會當(dāng)做死代碼刪除;其次上面關(guān)聯(lián)Observable的方式是直接添加到其原型上面,由于全局存在一個Observable對象,就跟window對象一樣,像上面添加屬性和方法是不可取的,是會帶來隱患的。

=> 不"打補(bǔ)丁" <=

說明:?開發(fā)RxJS庫的規(guī)則的其中一條就是不能使用打補(bǔ)丁的方式使操作符函數(shù)與Observable對象關(guān)聯(lián)起來。如果是實例操作符,可以使用前面介紹過的bind/call,讓一個操作符函數(shù)只對一個具體的Observable對象生效;如果是靜態(tài)操作符,直接使用就好。

// 這里使用上面實現(xiàn)的map函數(shù)實現(xiàn)一個double操作符
import { Observable, of } from "rxjs";
function map(project) {
 ?return new Observable((observer) => {
 ? ?const sub = this.subscribe({
 ? ? ?next: (value) => {
 ? ? ? ?try {
 ? ? ? ? ?observer.next(project(value));
 ? ? ? ?} catch (err) {
 ? ? ? ? ?observer.error(err);
 ? ? ? ?}
 ? ? ?},
 ? ? ?error: (err) => observer.error(error),
 ? ? ?complete: () => observer.complete(),
 ? ?});
 ? ?return {
 ? ? ?unsubscribe: () => {
 ? ? ? ?sub.unsubscribe();
 ? ? ?},
 ? ?};
 ?});
}
Observable.prototype.double = function () {
 ? ?// 將當(dāng)前的Observable對象作為this值傳遞給map函數(shù)
 ? ?return map.call(this, (x) => x * 2);
};
// of操作符用于創(chuàng)建一個Observable對象
const source$ = of(1, 2, 3);
const result$ = source$.double().subscribe((res) => console.log(res));

(4)lettable/pipeable操作符

原因:?上面使用call/bind方法在函數(shù)體內(nèi)還是會使用this,函數(shù)還是不純,其次call的返回類型是無法確定的,在ts中只能使用any表示,因此會讓其失去類型檢查。

說明:?從RxJS v5.5.0開始,加上了這種更先進(jìn)的操作符定義和使用方式,稱為pipeable操作符,也曾經(jīng)被稱為lettable操作符,但是因為字面上太難理解,所以改成pipeable。

=> let操作符 <=

作用:?實際上就是把上游的Observable對象作為參數(shù)傳遞給let操作符里面的參數(shù)進(jìn)行處理,處理完之后將返回的Observable交給下游來訂閱。

// 下面的map函數(shù)就是上面寫的那個,這是以前的寫法,現(xiàn)在不支持,
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/let'; 
const source$ = Observable.of(1, 2, 3); 
// 雖然map的使?是通過給Observable打補(bǔ)丁導(dǎo)?的,
// 但是map是直接作?于參數(shù)obs$,?不是作?于this,
// 所以,double$是?個純函數(shù)。
const double$ = obs$ => obs$.map(x => x * 2); 
// let的參數(shù)是?個函數(shù),在這個例?中函數(shù)參數(shù)名為double$,
// 這個函數(shù)名也以$為后綴,代表它返回的是?個Observable對象,
// double$同樣接受?個Observable對象作為輸?參數(shù),也就是說,
// double$的功能就是根據(jù)?個Observable對象產(chǎn)??個新的
// Observable對象。
const result$ = source$.let(double$);

過程:?let起到連接上游下游的作用,真正的工作完全由函數(shù)參數(shù)map來執(zhí)行。

處理之前的map函數(shù):?此時map的實現(xiàn)部分也看不到對this的訪問,而是用一個參數(shù)obs$代替了 this,這樣,在數(shù)據(jù)管道中上游的Observable是以參數(shù)形式傳遞,而不是靠 this來獲得,讓map徹底成了一個純函數(shù)。map執(zhí)行返回的結(jié)果是一個函數(shù),接受一個Observable對象返回一個 Observable 對象,正好滿足let的參數(shù)要求。

const map = (fn) => (obs$) =>
 ?new Observable((observer) =>
 ? ?obs$.subscribe({
 ? ? ?next: (value) => observer.next(fn(value)),
 ? ? ?error: (err) => observer.error(error),
 ? ? ?complete: () => observer.complete(),
 ? ?})
 ?);

好處:?由于每一個lettable操作符都是純函數(shù),而且也不會被作為補(bǔ)丁掛在Observable上,Tree Shaking就能夠找到根本不會被使用的操作符。

=> pipe操作符 <=

原因:?要導(dǎo)入let這個操作符,又不得不用傳統(tǒng)的打補(bǔ)丁或者使用call的方式,使用起來要導(dǎo)入很麻煩;所以創(chuàng)建了pipe操作符,它可以滿足let具備的功能。使用pipe只需像使用let那樣導(dǎo)入模塊,任何Observable對象都保持pipe,此外還有管道功能,可以把多個lettable操作符串接起來,形成數(shù)據(jù)管道。

import { map, filter, of } from "rxjs";
const source$ = of(1, 2, 3);
// 可以一次使用多個操作符
const result$ = source$.pipe(
 ?filter((x) => x % 2 === 0),
 ?map((x) => x * 2)
);
result$.subscribe(console.log);

三、創(chuàng)建數(shù)據(jù)流

(1)創(chuàng)建類操作符

說明:?這里所說的創(chuàng)造,是指這些操作符不依賴于其他Observable對象,這些操作符可以憑空或者根據(jù)其他數(shù)據(jù)源創(chuàng)造出?個Observable對象,其次創(chuàng)建類操作符往往不會從其他Observable對象獲取數(shù)據(jù),因為在數(shù)據(jù)管道中它自己就是數(shù)據(jù)流的源頭,基于這些特性大部分的創(chuàng)建類操作符都是靜態(tài)操作符。

(2)創(chuàng)建同步數(shù)據(jù)流

說明:?對于同步的Observable對象,需要關(guān)心的是存在哪些數(shù)據(jù)和數(shù)據(jù)之間的先后順序,由于數(shù)據(jù)之間的時間間隔不存在因此不需要考慮時間方面的問題。

=> of操作符 <=

作用:?可以輕松創(chuàng)建指定數(shù)據(jù)集合的Observable對象;

參數(shù):?of(數(shù)據(jù)1,數(shù)據(jù)2,數(shù)據(jù)3...);

注意:?of操作符所產(chǎn)生的Observable對象被訂閱后會將參數(shù)依次吐出來,吐完之后會調(diào)用complete方法;吐的這個過程是同步的,也就是所有數(shù)據(jù)之間是不存在間隔的。

const { of } = Rx;
of(1).pipe();
const { of } = Rx;
of(1, 2, 3).pipe();


值:?of產(chǎn)生的是Cold Observable,對于每一個Observer都會重復(fù)吐出同樣的一組數(shù)據(jù),所以可以反復(fù)使用。


=> range操作符 <=

作用:?對需要產(chǎn)生多個很長連續(xù)數(shù)字序列的場景,就是得上range這個操作符了,range的含義就是“范圍”,只需要指定一個范圍的開始值和長度,range 就能夠產(chǎn)生這個范圍內(nèi)的依次+1的數(shù)字序列;同樣數(shù)據(jù)吐完之后會調(diào)用complete方法。

參數(shù):?range(序列開始的任意數(shù)字,序列的長度)

const { range } = Rx;
range(1, 100).pipe();

局限性:?無法規(guī)定每次遞增的大小

=> generate操作符 <=

作用:?類似一個for循環(huán),設(shè)定一個初始值,每次遞增這個值,直到滿足某個條件的時候才中止循環(huán),同時,循環(huán)體內(nèi)可以根據(jù)當(dāng)前值產(chǎn)生數(shù)據(jù)。

參數(shù):?generate(初始值, 條件判斷函數(shù), 值如何增加函數(shù), 返回結(jié)果處理函數(shù))

// 假設(shè)存在這樣的for循環(huán):產(chǎn)??個?10?的所有偶數(shù)的平?
const result = [];
for (let i = 2; i < 10; i += 2) {
 ?result.push(i * i);
}
// 使用generate類似實現(xiàn)
const { generate } = Rx;
generate(
 ? ?2, // 初始值,相當(dāng)于for循環(huán)中的i=2
 ? ?value => value < 10, //繼續(xù)的條件,相當(dāng)于for中的條件判斷
 ? ?value => value + 2, //每次值的遞增
 ? ?value => value * value // 產(chǎn)?的結(jié)果
).pipe();

注意:?使用時需要保證后面三個函數(shù)參數(shù)為純函數(shù)

=> repeat操作符 <=

作用:?重復(fù)上游Observable中的數(shù)據(jù)n

參數(shù)1:?repeat(重復(fù)的次數(shù))

const { of } = Rx;
const { repeat } = RxOperators;
of(1, 2, 3).pipe(repeat(100))

參數(shù)2:?repeat({count: 重復(fù)的次數(shù), delay: 數(shù)據(jù)的時間間隔})

import { of, repeat } from "rxjs";
of(1, 2, 3)
 ?.pipe(
 ? ?repeat({
 ? ? ?count: 10,
 ? ? ?delay: 1000,
 ? ?})
 ?)
 ?.subscribe((res) => console.log(res));

注意:?保證上游Observable對象一定會完結(jié)。

=> EMPTY常量 <=

作用:?產(chǎn)生一個直接完結(jié)的Observable對象,沒有參數(shù),不產(chǎn)生任何數(shù)據(jù),直接完結(jié)。

const { EMPTY ?} = Rx;
EMPTY.pipe()


=> throwError操作符 <=

作用:?它所產(chǎn)生的Observable對象也是什么都不做,直接出錯,拋出的錯誤就是throw的參數(shù)

參數(shù):?throwError(錯誤程序)

const { throwError ?} = Rx;
throwError(new Error('這是一個錯誤')).pipe()


=> NEVER常量 <=

作用:?產(chǎn)生的Observable對象就真的是什么都不做,既不吐出數(shù)據(jù),也不完結(jié),也不產(chǎn)生錯誤,就這樣待著,一直到永遠(yuǎn)

const { NEVER ?} = Rx;
NEVER.pipe()


(3)創(chuàng)建異步數(shù)據(jù)流

說明:?就是創(chuàng)建異步的Observable對象,不光要考慮產(chǎn)生什么數(shù)據(jù),還需要考慮數(shù)據(jù)之間的時間間隔了

=> interval操作符 <=

作用:?定時從Observable對象吐出一個數(shù)據(jù),如果不主動結(jié)束就一直執(zhí)行

參數(shù):?interval(吐數(shù)據(jù)的間隔毫秒數(shù))

const { interval } = Rx;
interval(1000).pipe()
注意:
它所創(chuàng)建的數(shù)據(jù)流不會自動完結(jié),也就是不會調(diào)用complete方法,要想結(jié)束只能夠執(zhí)行退訂操作了 其次這個異步數(shù)據(jù)序列總是從0開始遞增的; 最后它與原生的setinterval的地位是等價的

=> timer操作符 <=

作用:?產(chǎn)生的Observable對象在指定毫秒之后會吐出一個數(shù)據(jù),執(zhí)行后立即結(jié)束

參數(shù):?timer(毫秒數(shù) / 一個Date對象, 時間間隔)

// 明確延時產(chǎn)?數(shù)據(jù)的時間間隔
const { timer } = Rx;
timer(1000).pipe()
// 明確的是?個時間點
const { timer } = Rx;
timer(
 ?new Date(
 ? ?new Date().getTime() + 1000
 ?)
).pipe()
const { timer } = Rx;
timer(1000,2000).pipe()
注意:
如果使用第二個參數(shù),產(chǎn)生的數(shù)據(jù)流跟interval類似,只不過產(chǎn)生第一個數(shù)據(jù)的時間間隔由第一個參數(shù)決定,后面產(chǎn)生數(shù)據(jù)的時間間隔由第二個參數(shù)決定;如果兩個參數(shù)一致,那就是interval了

=> from操作符 <=

作用:?以把任何可迭代對象都轉(zhuǎn)化為Observable對象

參數(shù):?from(任何可迭代對象)

const { from } = Rx;
from([1,2,3]).pipe()
const { from } = Rx;
from('abc').pipe()

注意:?在from的眼中,把輸出參數(shù)都當(dāng)做一個Iterable來看待,所以上面的字符串a(chǎn)bc在from看來就和數(shù)組['a','b','c']沒有區(qū)別

import { from } from "rxjs";
const promise = Promise.resolve("good");
const source$ = from(promise);
source$.subscribe(
 ?console.log,
 ?(error) => console.log("catch", error),
 ?() => console.log("complete")
);
import { from } from "rxjs";
const promise = Promise.reject("error");
const source$ = from(promise);
source$.subscribe(
 ?console.log,
 ?(error) => console.log("catch", error),
 ?() => console.log("complete")
);

解釋:?如果from的參數(shù)是promise,當(dāng)promsie成功結(jié)束,from產(chǎn)生的Observable對象就會吐出Promise成功的結(jié)果,并且立刻結(jié)束,如果以失敗而告終的時候,from產(chǎn)生的Observable對象也會立刻產(chǎn)生失敗事件

=> fromEvent操作符 <=

作用1:?在網(wǎng)頁開發(fā)中,可以把DOM中的事件轉(zhuǎn)化為Observable對象中的數(shù)據(jù)

參數(shù)1:?fromEvent(事件源, 事件名稱)

// 希望點擊id為clickMe的按鈕時,id為text的div中的數(shù)字會增加1, 
// 連續(xù)點擊那個按鈕,對應(yīng)數(shù)字會持續(xù)增加
<template>
 ?<div>
 ? ?<button id="clickMe">Click Me</button>
 ? ?<div id="text">0</div>
 ?</div>
</template>
<script setup>
import { fromEvent } from "rxjs";
import { onMounted } from "vue";
let clickCount = 0;
onMounted(() => {
 ?const event$ = fromEvent(
 ? ? ?document.querySelector("#clickMe"), 
 ? ? ?"click"
 ?);
 ?event$.subscribe(() => {
 ? ?document
 ? ? ? ?.querySelector("#text")
 ? ? ? ?.innerText = ++clickCount;
 ?});
});
</script>
<style></style>

說明:?網(wǎng)頁開發(fā)中事件源一般是DOM節(jié)點

// 這里展示從Node.js的events中獲得數(shù)據(jù)
import { fromEvent } from "rxjs";
// 這個模塊需要使用 npm i events 安裝一下
import EventEmitter from "events";
const emitter = new EventEmitter();
// 只接受數(shù)據(jù)源中事件為"msg"的數(shù)據(jù)
const source$ = fromEvent(emitter, "msg");
source$.subscribe(
 ?console.log,
 ?(error) => console.log("catch", error),
 ?() => console.log("complete")
);
// emitter的emit函數(shù)發(fā)送任何名稱的事件,
// 第?個參數(shù)就是事件名稱,第?個參數(shù)是數(shù)據(jù)
emitter.emit("msg", 1);
emitter.emit("msg", 2);
emitter.emit("another-msg", "oops");
emitter.emit("msg", 3);

注意:?fromEvent產(chǎn)生的是Hot Observable,也就是數(shù)據(jù)的產(chǎn)生和訂閱是無關(guān)的,如果在訂閱之前調(diào)用emitter.emit,那有沒有Observer這些數(shù)據(jù)都會立刻吐出來,等不到訂閱的時候,當(dāng)添加了Observer的時候,仍然什么數(shù)據(jù)都獲得不到。

import { fromEvent } from "rxjs";
import EventEmitter from "events";
const emitter = new EventEmitter();
const source$ = fromEvent(emitter, "msg");
// 在訂閱之前發(fā)射數(shù)據(jù)
emitter.emit("msg", 1);
emitter.emit("msg", 2);
emitter.emit("another-msg", "oops");
emitter.emit("msg", 3);
source$.subscribe(
 ?console.log,
 ?(error) => console.log("catch", error),
 ?() => console.log("complete")
);


=> fromEventPattern操作符 <=

作用:?用于處理的Observable對象被訂閱退訂時的動作

參數(shù):?fromEventPattern(被訂閱時觸發(fā)的函數(shù), 被退訂時觸發(fā)的函數(shù))

import { fromEventPattern } from "rxjs";
import EventEmitter from "events";
const emitter = new EventEmitter();
// handler參數(shù)可以理解為觀察者對象中的next方法
const addHandler = (handler) => {
 ?// 監(jiān)聽事件源中的msg事件,每次觸發(fā)事件執(zhí)行next方法
 ?emitter.addListener("msg", handler);
};
const removeHandler = (handler) => {
 ?// 與上面相反,會移除msg事件上面的next方法
 ?emitter.removeListener("msg", handler);
};
const source$ = fromEventPattern(addHandler, removeHandler);
const subscription = source$.subscribe(
 ?console.log,
 ?(error) => console.log("catch", error),
 ?() => console.log("complete")
);
emitter.emit("msg", "hello");
emitter.emit("msg", "world");
// 取消訂閱后emitter上面監(jiān)聽的事件被取消掉,
// 所以此處的值并不會出現(xiàn)在Observable對象里面
subscription.unsubscribe();
emitter.emit("msg", "end");

說明:?它提供的就是一種模式,不管數(shù)據(jù)源是怎樣的行為,最后的產(chǎn)出都是一個Observable對象

=> ajax操作符 <=

作用:?用于發(fā)送請求并根據(jù)結(jié)果返回Observable對象

參數(shù):?ajax('請求的地址')

// 根據(jù)github上的api獲取RxJS項?獲得的Start的數(shù)量
<template>
 ?<div>
 ? ?<button id="getStar">Get RxJS Star Count</button>
 ? ?<div id="text"></div>
 ?</div>
</template>
<script setup>
import { onMounted } from "vue";
import { fromEvent } from "rxjs";
import { ajax } from "rxjs/ajax";
onMounted(() => {
 ?fromEvent(
 ? ? ?document.querySelector("#getStar"),
 ? ? ?"click"
 ?).subscribe(
 ? ? ?() => {
 ? ? ? ? ?ajax("https://api.github.com/repos/ReactiveX/rxjs")
 ? ? ? ? ?.subscribe(
 ? ? ? ? ? ? ?(value) => {
 ? ? ? ? ? ? ? ? ?const starCount = 
 ? ? ? ? ? ? ? ? ? ? ?value.response.stargazers_count;
 ? ? ? ? ? ? ? ? ? ? ?
 ? ? ? ? ? ? ? ? ?document.querySelector("#text").innerText = 
 ? ? ? ? ? ? ? ? ? ? ?starCount;
 ? ? ? ? ? });
 ?});
});
</script>


=> defer操作符 <=

作用:?用于延遲執(zhí)行某些操作

參數(shù):?defer(一個函數(shù),這個函數(shù)會在被訂閱時調(diào)用)

// 延遲發(fā)送請求
import { defer } from "rxjs";
import { ajax } from "rxjs/ajax";
defer(
 ? ?() => ajax("https://api.github.com/repos/ReactiveX/rxjs")
 ? ? ? ? ? ?.subscribe(
 ? ? ? ? ? ? ? ?(res) => console.log(res)
 ? ? ? ? ? ?)
);


四、合并數(shù)據(jù)流

(1)合并類操作符

說明:?其作用在于將有多個Observable對象作為數(shù)據(jù)來源,把不同來源的數(shù)據(jù)根據(jù)不同的規(guī)則合并到一個Observable對象中。

=> concat操作符 <=

作用:?把多個Observable中的數(shù)據(jù)內(nèi)容依次合并,合并的時候原有數(shù)據(jù)不變

參數(shù):?concat(數(shù)據(jù)1, 數(shù)據(jù)2, 數(shù)據(jù)3...)

import { concat, of } from "rxjs";
const source1$ = of(1, 2, 3);
const source2$ = of(4, 5, 6);
concat(source1$, source2$)
 ? ?.subscribe(
 ? ? ? ?(res) => console.log(res)
 ? ?);

注意:?它在工作的時候,會先從第一個Observable對象中獲取數(shù)據(jù),等它complete之后,再從下一個對象中去數(shù)據(jù),直到取完所有的,此時,如果其中有一個對象是不完結(jié)的狀態(tài),那么它之后的Observable對象就不會有被取到的機(jī)會。

=> merge操作符 <=

作用:?一定性訂閱上游所有的Observable對象,只要有數(shù)據(jù)傳遞下來,這個數(shù)據(jù)就會被傳遞給下游,也就是數(shù)據(jù)采取先到先出的原則,同時合并的時候原有數(shù)據(jù)不變

參數(shù):?merge(數(shù)據(jù)1, 數(shù)據(jù)2, 數(shù)據(jù)3, ... 可選數(shù)字參數(shù))

場景一:合并異步數(shù)據(jù)流
import { merge, of, repeat, pipe } from "rxjs";
// 隔700ms重復(fù)一個A,重復(fù)的次數(shù)為5次
const source1$ = of("A").pipe(
 ? ? ? ? ? ? ? ? ? ? ? ?repeat(
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?{ count: 5, delay: 700 }
 ? ? ? ? ? ? ? ? ? ? ? ?));
// 隔800ms重復(fù)一個B,重復(fù)的次數(shù)為5次
const source2$ = of("B").pipe(
 ? ? ? ? ? ? ? ? ? ? ? ?repeat(
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?{ count: 5, delay: 800 }
 ? ? ? ? ? ? ? ? ? ? ? ?));
const merged$ = merge(source1$, source2$);
merged$.subscribe((res) => console.log(res));
場景二: 同步限流

解釋:?此時需要用到最后的參數(shù),參數(shù)是一個數(shù)字,表示可以同時合并的個數(shù)

import { merge, of, repeat, pipe } from "rxjs";
// 隔700ms重復(fù)一個A,重復(fù)的次數(shù)為5次
const source1$ = of("A").pipe(
 ? ? ? ? ? ? ? ? ? ? ? ?repeat(
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?{ count: 5, delay: 700 }
 ? ? ? ? ? ? ? ? ? ? ? ?));
// 隔800ms重復(fù)一個B,重復(fù)的次數(shù)為5次
const source2$ = of("B").pipe(
 ? ? ? ? ? ? ? ? ? ? ? ?repeat(
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?{ count: 5, delay: 800 }
 ? ? ? ? ? ? ? ? ? ? ? ?));
 ? ? ? ? ? ? ? ? ? ? ? ?
// 隔900ms重復(fù)一個C,重復(fù)的次數(shù)為5次
const source3$ = of("C").pipe(
 ? ? ? ? ? ? ? ? ? ? ? ?repeat(
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?{ count: 5, delay: 900 }
 ? ? ? ? ? ? ? ? ? ? ? ?));
 ? ? ? ? ? ? ? ? ? ? ? ?
// 限定合并的個數(shù)為2
const merged$ = merge(source1$, source2$, source3$, 2);
merged$.subscribe((res) => console.log(res));
場景三:合并多個事件

說明:?一個元素存在click事件和touch事件,對應(yīng)網(wǎng)頁和移動設(shè)備,假如其事件處理程序的邏輯一致,此時就可以分別使用fromEvent獲取單個事件流,之后用merge合并成一個數(shù)據(jù)流,就可以集中管理了

// 可以像這樣處理
const click$ = fromEvent(element, 'click'); 
const touchend$ = fromEvent(element, 'touchend'); 
merge(click$, touchend$).subscribe(處理函數(shù));

=> zip操作符 <=

作用:?將數(shù)據(jù)流里面的數(shù)據(jù)一一對應(yīng)并使用數(shù)組組合起來

參數(shù):?zip(數(shù)據(jù)流1, 數(shù)據(jù)流2, 數(shù)據(jù)流3...)

場景一: 一對一合并
import { interval, of, zip } from "rxjs";
// 一個異步數(shù)據(jù)流,產(chǎn)生的數(shù)據(jù)是無限的
const source1$ = interval(1000);
// 一個同步數(shù)據(jù)流,產(chǎn)生的數(shù)據(jù)流是有限
const source2$ = of("a", "b", "c");
// 將兩個數(shù)據(jù)流合并
zip(source1$, source2$)
 ? ?.subscribe(
 ? ? ? ?(res) => console.log(res),
 ? ? ? ?null,
 ? ? ? ?() => console.log('complete')
 ? ?);

注意:?這里數(shù)據(jù)的匹配是一一對應(yīng)的,所以數(shù)據(jù)少的那個Observable決定zip產(chǎn)生數(shù)據(jù)的個數(shù);然后在對應(yīng)的時候需要雙方都有數(shù)據(jù)才能夠?qū)?yīng),這也是為什么上面的打印會隔1s才打印。

問題: 數(shù)據(jù)積壓

說明:?如果某個上游source1$吐出數(shù)據(jù)的速度很快,而另一個上游source2$吐出數(shù)據(jù)的速度很慢,那zip就不得不先存儲source1$吐出的數(shù)據(jù),因為RxJS的工作方式是“推”, Observable把數(shù)據(jù)推給下游之后就沒有責(zé)任保存數(shù)據(jù)了。被source1$推送了數(shù)據(jù)之后,zip就有責(zé)任保存這些數(shù)據(jù),等著和source2$未來吐出的數(shù)據(jù)配對。假如source2$遲遲不吐出數(shù)據(jù),那么zip就會一直保存source1$沒有配對的數(shù)據(jù),然而這時候source1$可能會持續(xù)地產(chǎn)生數(shù)據(jù),最后zip積壓的數(shù)據(jù)就會越來越多,占用的內(nèi)存也就越來越多。對于數(shù)據(jù)量比較小的Observable對象,這樣的數(shù)據(jù)積壓還可以忍受,但是對于超大量的數(shù)據(jù)流,使用zip就不得不考慮潛在的內(nèi)存壓力問題。

=> combineLatest操作符 <=

作用:?合并上游所有Observable一個最新的數(shù)據(jù),也就是它返回值是一個數(shù)組

參數(shù):?combineLatest([數(shù)據(jù)1, 數(shù)據(jù)2, 數(shù)據(jù)3 ...], 處理函數(shù))

場景一: 基本使用
import { combineLatest, timer } from "rxjs";
// 隔1s產(chǎn)生一個數(shù)字
const firstTimer = timer(1000, 1000);
// 隔2s產(chǎn)生一個數(shù)字
const secondTimer = timer(1000, 2000);
// 合并上面的數(shù)據(jù)流
const combinedTimers = combineLatest([firstTimer, secondTimer]);
combinedTimers.subscribe((value) => console.log(value));

注意:?首先還是一一對應(yīng)的關(guān)系,也就是如果一個數(shù)據(jù)源還沒發(fā)射值出來,那么會等待它將值發(fā)射出來,如果值沒有改變并且操作沒有完結(jié)的話,發(fā)射的值將一直是這一個,所以只有所有的Observable對象完結(jié),combineLatest才會給下游一個complete信號,表示不會有任何數(shù)據(jù)更新了

場景二: 合并同步數(shù)據(jù)流
const firstTimer = of("a", "b", "c");
const secondTimer = of(1, 2, 3);
const combinedTimers = combineLatest([firstTimer, secondTimer]);
combinedTimers.subscribe((value) => console.log(value));

工作方式:?combineLatest在工作的時候,會按照順序依次訂閱所有上游的Observable對象,只有所有上游Observable對象都已經(jīng)吐出數(shù)據(jù)了,才會給下游傳遞所有上游“最新數(shù)據(jù)”組合的數(shù)據(jù)

解釋:?由于of產(chǎn)生的同步數(shù)據(jù)流,在被訂閱時就會吐出所有數(shù)據(jù),最后一個吐出的數(shù)據(jù)是字符串c,這也就是最新的數(shù)據(jù),然后訂閱下一個對象,下一個對象會依次吐出數(shù)據(jù),然后跟上一個對象的最新數(shù)據(jù)c結(jié)合,這就得到了上面看到的內(nèi)容

場景三:定制下游數(shù)據(jù)

說明:?這里就需要啊使用處理函數(shù)了,這個函數(shù)的參數(shù)就是每一個數(shù)據(jù)源的最新值,其返回值就是下游所接受到的數(shù)據(jù),如果沒有返回值,則下游收到的數(shù)據(jù)為undefined

import { combineLatest, timer, of } from "rxjs";
const firstTimer = of("a", "b", "c");
const secondTimer = of(1, 2, 3);
const combinedTimers = combineLatest(
 ?[firstTimer, secondTimer],
 ?(res1, res2, res3) => {
 ? ?// 上面只有兩個數(shù)據(jù)源,所以參數(shù)只會前兩個有值
 ? ?console.log(res1, res2, res3);
 ?}
);
combinedTimers.subscribe();


=> withLatestFrom操作符 <=

說明:?這個的作用于combineLatest是類似的,只不過下游推送數(shù)據(jù)只能由一個上游Observable對象驅(qū)動,也就是調(diào)用withLatestFrom的那個Observable對象起到主導(dǎo)數(shù)據(jù)產(chǎn)生節(jié)奏的作用,作為參數(shù)的Observable對象只能貢獻(xiàn)數(shù)據(jù),不能控制產(chǎn)生數(shù)據(jù)的時機(jī)

參數(shù):?數(shù)據(jù)源1.withLatestFrom(數(shù)據(jù)源2)

import { withLatestFrom, timer, pipe, map } from "rxjs";
// 每隔兩秒產(chǎn)生100、200、300這樣的數(shù)字
const source1$ = timer(0, 2000)
 ? ? ? ? ? ? ? ? ? ?.pipe(
 ? ? ? ? ? ? ? ? ? ? ? ?map((x) => 100 * x)
 ? ? ? ? ? ? ? ? ? ?);
// 每隔一秒產(chǎn)生0、1、2這樣的數(shù)字
const source2$ = timer(500, 1000);
// 后面的處理函數(shù)將它們想加起來
const result$ = source1$
 ? ? ? ? ? ? ? ? ? ?.pipe(
 ? ? ? ? ? ? ? ? ? ? ? ?withLatestFrom(
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?source2$, 
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?(a, b) => a + b
 ? ? ? ? ? ? ? ? ? ? ? ?)
 ? ? ? ? ? ? ? ? ? ?);
result$.subscribe(console.log);


=> race操作符 <=

作用:?以O(shè)bservable產(chǎn)生第一個數(shù)據(jù)的時間為準(zhǔn),只留下最快的那一個,當(dāng)然,使用的所有數(shù)據(jù)也是最快的那一個

參數(shù):?race(數(shù)據(jù)源1, 數(shù)據(jù)源2, 數(shù)據(jù)源3 ...)

import { timer, race, pipe, map } from "rxjs";
// 立即開始產(chǎn)生數(shù)據(jù)a
const source1$ = timer(0, 2000).pipe(map(() => "a"));
// 500ms后開始產(chǎn)生數(shù)據(jù)b
const source2$ = timer(500, 1000).pipe(map(() => "b"));
// 比賽
const winner$ = race(source1$, source2$);
winner$.subscribe(console.log);

=> startWith操作符 <=

作用:?在讓?個Observable對象在被訂閱的時候,總是先同步吐出指定的若?個數(shù)據(jù)

參數(shù):?數(shù)據(jù)源.startWith(參數(shù)1, 參數(shù)2, 參數(shù)3 ...)

import { of, startWith } from "rxjs";
of(1000)
 ?.pipe(startWith("timer start", 1, 2))
 ?.subscribe((x) => console.log(x));

=> forkJoin操作符 <=

作用:?等待所有參數(shù)Observable對象的最后?個數(shù)據(jù),將其合并成一個數(shù)組發(fā)射出去

參數(shù):?forkJoin(對象 / 數(shù)組)

import { forkJoin, of, timer } from "rxjs";
// 下面會在四秒后返回結(jié)果
forkJoin({
 ?foo: of(1, 2, 3, 4),
 ?bar: Promise.resolve(8),
 ?baz: timer(4000),
}).subscribe((res) => console.log(res));

(2)高階Observable

說明:?簡單理解就是一個Observable中存在Observable,它有一個特點就是高階Observable完結(jié)不代表其里面的Observable完結(jié)

=> concatAll操作符 <=

說明:?這個操作符針對高階Observable,也是依次訂閱Observable內(nèi)部的Observable取值結(jié)合,訂閱的過程中如果上一個Observable沒有完結(jié)就不會訂閱下一個Observable對象。其他操作可以參照concat

參數(shù):?沒有參數(shù)

import { of, concatAll } from "rxjs";
const source = of(
 ? ? ? ? ? ? ? ? ? ?of(1, 2, 3),
 ? ? ? ? ? ? ? ? ? ?of(4, 5, 6),
 ? ? ? ? ? ? ? ? ? ?of(7, 8, 9)
 ? ? ? ? ? ? ? ?);
source.pipe(concatAll())
 ? ? ? ?.subscribe(
 ? ? ? ? ? ?(val) => console.log(val)
 ? ? ? ?);

=> mergeAll操作符 <=

說明:?針對高階Observable,在合并的時候,依次訂閱其內(nèi)部的Observable對象,那個對象有數(shù)據(jù)傳下來,這個數(shù)據(jù)就會傳遞給下游;它可以傳遞一個數(shù)字來限定合并的最大流的個數(shù)。其他操作可以參照merge

參數(shù):?mergeAll(數(shù)字)

import { of, mergeAll, repeat } from "rxjs";
// 這里A延遲復(fù)制的時間比B長,所以第二次打印的時候B在前面
const source = of(
 ?of("A").pipe(
 ? ? ? ? ? ? ?repeat({ count: 5, delay: 800 })
 ? ? ? ? ?),
 ?of("B").pipe(
 ? ? ? ? ? ? ?repeat({ count: 5, delay: 700 })
 ? ? ? ? ?)
);
source.pipe(mergeAll())
 ? ? ? ? ? ?.subscribe(
 ? ? ? ? ? ? ? ?(val) => console.log(val)
 ? ? ? ? ? ?);

=> zipAll操作符 <=

說明:?對高階Observable使用的時候,將數(shù)據(jù)流里面的數(shù)據(jù)一一對應(yīng)并使用數(shù)組組合起來。其它操作可以參考zip

參數(shù):?zipAll(處理函數(shù))

import { of, zipAll } from "rxjs";
const source = of(of("A", "B", "C"), of(1, 2, 3), of("X", "Y", "Z"));
source
 ?.pipe(
 ? ?// 可以接收一個處理函數(shù),每個參數(shù)對應(yīng)返回值的每一項
 ? ?zipAll((a, b, c) => {
 ? ? ?// 這里將參數(shù)打印出來,如果沒有返回值則下游將收不到值
 ? ? ?console.log(a, b, c);
 ? ?})
 ?)
 ?.subscribe();

=> combineLatestAll操作符 <=

說明:?在處理高階Observable的時候,將其內(nèi)部Observable產(chǎn)生的最新數(shù)據(jù)一一對應(yīng)并用數(shù)組的形式返回出來。其它操作可以參考combineLatest

參數(shù):?combineLatestAll(處理函數(shù))

import { of, combineLatestAll } from "rxjs";
const source = of(of("A", "B", "C"), of(1, 2, 3), of("X", "Y", "Z"));
source
 ?.pipe(
 ? ?// 可以接收一個處理函數(shù),每個參數(shù)對應(yīng)返回值的每一項
 ? ?combineLatestAll((a, b, c) => {
 ? ? ?// 這里將參數(shù)打印出來,如果沒有返回值則下游將收不到值
 ? ? ?console.log(a, b, c);
 ? ?})
 ?)
 ?.subscribe();

五、輔助類操作符

(1)數(shù)學(xué)類操作符

說明:?這里介紹的操作符會遍歷上游Observable對象中吐出的所有數(shù)據(jù)才給下游傳遞數(shù)據(jù), 也就是說,它們只有在上游完結(jié)的時候,才給下游傳遞唯?數(shù)據(jù)。

=> count操作符 <=

作用:?用于統(tǒng)計上游Observable對象吐出的所有數(shù)據(jù)個數(shù),所以上游的Observable需要完結(jié)

參數(shù):?count(過濾函數(shù))

import { of, interval, count } from "rxjs";
// 可以完結(jié)
of(1000, 1)
 ?.pipe(
 ? ? ?// 此時過濾出數(shù)據(jù)為1的數(shù)量
 ? ? ?count(
 ? ? ? ? ?(val) => val === 1
 ? ? ?)
 ?)
 ?.subscribe((res) => console.log(res));
// 無法完結(jié)
interval(1000)
 ?.pipe(count())
 ?.subscribe((res) => console.log(res));

=> max和min操作符 <=

作用:?找出上游數(shù)據(jù)中的最大值最小值

參數(shù):?max(比較函數(shù)) / min(比較函數(shù))

import { of, max } from "rxjs";
of(
 ? ?{ age: 7, name: "Foo" },
 ? ?{ age: 5, name: "Bar" },
 ? ?{ age: 9, name: "Beer" }
).pipe(
 ? ?// 返回值為正 => a > b
 ? ?// 返回值為0 => a = b
 ? ?// 返回值為負(fù) => a < b
 ? ?max((a, b) => a.age > b.age)
 ?)
 .subscribe(
 ? ? (x) => console.log(x.name)
 );

注意:?如果Observable吐出的數(shù)據(jù)類型是復(fù)雜數(shù)據(jù)類型,?如?個對象,那必須指定?個?較這種復(fù)雜類型??的?法,就像上面使用的那樣

=> reduce操作符 <=

說明:?對上游的每個數(shù)據(jù)進(jìn)行自定義計算,也就是對每一個元素都會調(diào)用一次這個函數(shù)

參數(shù):?reduce((累加的值, 當(dāng)前元素的值) => {}, 初始值)

// 計算 1-100 的和
import { range, reduce } from "rxjs";
range(1, 100)
 ?.pipe(
 ? ? ?reduce(
 ? ? ? ? ?(acc, current) => acc + current,
 ? ? ? ? ?0
 ? ? ?)
 ?)
 ?.subscribe(
 ? ? ?(res) => console.log(res)
 ?);

2)條件操作符

說明:?根據(jù)上游Observable對象的某些條件產(chǎn)生一個新的 Observable對象

=> every操作符 <=

作用:?它接受一個判定函數(shù)作為參數(shù),如果上游所有數(shù)據(jù)都能夠通過這個函數(shù),那么會返回一個包含true值的Observable,有一個通不過就返回一個包含false值的Observable,在吐出結(jié)果后every產(chǎn)生的Observable會立即完結(jié);不要對不會完結(jié)的對象使用

參數(shù):?every(判定函數(shù))

import { every, of } from "rxjs";
of(1, 100)
 ?.pipe(
 ? ? ?every(
 ? ? ? ? ?// 這里判定是否所有值都大于10,顯然1不行
 ? ? ? ? ?(val) => val > 10
 ? ? ?)
 ?)
 ?.subscribe((res) => console.log(res));

=> find和findIndex操作符 <=

作用:?通過一個處理函數(shù)來在上游數(shù)據(jù)中查找滿足條件的數(shù)據(jù),find會吐出找到的上游的數(shù)據(jù),findIndex會吐出滿足判定條件的索引,如果找不到find會吐出undefined后完結(jié),findIndex則會吐出-1后完結(jié);不要對不會完結(jié)的對象使用

參數(shù):?find(處理函數(shù)) / findIndex(處理函數(shù))

import { find, findIndex, of } from "rxjs";
of(1, 100)
 ?.pipe(
 ? ? ?find(
 ? ? ? ? ?(val) => (val = 100)
 ? ? ?)
 ?)
 ?.subscribe((res) => console.log(res));
 ?
of(1, 100)
 ?.pipe(
 ? ? ?findIndex(
 ? ? ? ? ?(val) => (val = 100)
 ? ? ?)
 ?)
 ?.subscribe((res) => console.log(res));

=> isEmpty操作符 <=

作用:?檢測上游Observable對象是不是空的,如果在完結(jié)之前沒有吐出數(shù)據(jù),它就是空的,此時返回一個包含true值的Observable,否則返回一個包含false值的Observable

import { EMPTY, isEmpty, of } from "rxjs";
// 不是空的
of(1)
 ?.pipe(isEmpty())
 ?.subscribe((res) => console.log(res));
 ?
// 是空的
EMPTY.pipe(isEmpty())
 ?.subscribe((res) => console.log(res));

=> defaultIfEmpty操作符 <=

作用:?接受一個默認(rèn)值,如果檢測上游的Observable是空的,則把這個默認(rèn)值傳遞給下游,如果不是空的就把上游的東西傳遞給下游;如果不傳但是上游檢測還是空的,下游就會收到一個undefined

import { defaultIfEmpty, EMPTY, of } from "rxjs";
// 不是空值,不傳參數(shù)
of(1)
 ?.pipe(defaultIfEmpty())
 ?.subscribe((res) => console.log(res));
// 不是空值,傳參數(shù)
of(1)
 ?.pipe(defaultIfEmpty("存在內(nèi)容"))
 ?.subscribe((res) => console.log(res));
// 是空值,不傳參數(shù)
EMPTY.pipe(defaultIfEmpty())
 ?.subscribe((res) => console.log(res));
 ?
// 是空值,傳參數(shù)
EMPTY.pipe(defaultIfEmpty("存在內(nèi)容"))
 ?.subscribe((res) => console.log(res));

六、過濾數(shù)據(jù)流

(1)過濾類操作符

說明:?對上游Observable中所有的數(shù)據(jù)使用判定函數(shù)進(jìn)行操作,決定是否某些元素不能通過進(jìn)入下游,如果對某個元素處理結(jié)果為true,表示能通過,否則就不能通過

=> filter操作符 <=

作用:?跟JavaScript中的filter使用起來是類似的,只不過這里針對的是Observable

參數(shù):?filter(過濾函數(shù))

import { filter, interval } from "rxjs";
source$ = interval(1000)
 ?.pipe(
 ? ? ?// 過濾能被2整除的數(shù)據(jù)
 ? ? ?filter(
 ? ? ? ? ?(x) => x % 2 === 0
 ? ? ?)
 ?)
 ?
source$.subscribe((res) => console.log(res));

注意:?當(dāng)上游產(chǎn)?數(shù)據(jù)的時候,只要這個數(shù)據(jù)滿?判定條件,就會立刻被同步傳給下游。

=> first操作符 <=

作用:?過濾出Observable中第一個滿足條件的值,在沒有找到的時候會拋出一個錯誤,如果不想這個錯誤傳遞給下游可以使用第二個默認(rèn)值,它的作用是在沒找到滿足條件的值的時候?qū)⑦@個值傳遞出去。如果不傳參數(shù)則將第一個數(shù)據(jù)返回出去,

參數(shù):?filter(過濾函數(shù), 默認(rèn)值)

import { first, of } from "rxjs";
// 找不到結(jié)果拋出錯誤,但是給默認(rèn)值
of(1, 3)
 ?.pipe(first((x) => x % 2 === 0, 2))
 ?.subscribe((res) => console.log(res));
// 找到結(jié)果
of(1, 4, 3)
 ?.pipe(first((x) => x % 2 === 0))
 ?.subscribe((res) => console.log(res));
// 找不到結(jié)果拋出錯誤
of(1, 3)
 ?.pipe(first((x) => x % 2 === 0))
 ?.subscribe((res) => console.log(res));

=> last操作符 <=

說明:?這個作用與first相反,它是找最后一個滿足條件的值,使用可以參考first,這里需要注意,使用這個操作符的上游必須完結(jié),否則操作符不知道哪一個是最后一個數(shù)據(jù)

參數(shù):?filter(過濾函數(shù), 默認(rèn)值)

import { last, interval } from "rxjs";
// 這個Observable不會完結(jié),自然也不會拿到結(jié)果
interval(1000)
 ?.pipe(last((x) => x % 2 === 0, 2))
 ?.subscribe((res) => console.log(res));

=> take操作符 <=

作用:?從上游的數(shù)據(jù)中拿指定個數(shù)的數(shù)據(jù),拿完之后就會完結(jié),并將獲取的數(shù)據(jù)返回

參數(shù):?take(需要的個數(shù))

import { interval, of, take } from "rxjs";
// 數(shù)據(jù)不夠拿,那就拿完為止
of("a", "b", "c")
 ?.pipe(take(4))
 ?.subscribe((res) => console.log(res));
// 獲取指定個數(shù)的數(shù)據(jù)
interval(1000)
 ?.pipe(take(4))
 ?.subscribe((res) => console.log(res));

注意:?上游每產(chǎn)生一個數(shù)據(jù)就會立即傳給下游,也就是同步操作的

=> takeLast操作符 <=

作用:?從后往前獲取指定個數(shù)的數(shù)據(jù),之后將數(shù)據(jù)一次性返回出去之后完結(jié)

參數(shù):?takeLast(需要的個數(shù))

import { interval, of, takeLast } from "rxjs";
// 數(shù)據(jù)不夠拿,那就拿完為止
of("a", "b", "c")
 ?.pipe(takeLast(4))
 ?.subscribe((res) => console.log(res));
// 數(shù)據(jù)沒有完結(jié),獲取不到數(shù)據(jù)
interval(1000)
 ?.pipe(takeLast(4))
 ?.subscribe((res) => console.log(res));

注意:?如果上游的Observable對象不會完結(jié)的話,那么是拿不到數(shù)據(jù)的,因為不知道誰是最后一個數(shù)據(jù)

=> takeWhile操作符 <=

說明:?takeWhile接受?個判定函數(shù)作為參數(shù),這個判定函數(shù)有兩個參數(shù),分別代表上游的數(shù)據(jù)和對應(yīng)的序號,takeWhile會吐出上游數(shù)據(jù),直到判定函數(shù)返回false,只要遇到第一個判定函數(shù)返回false的情況, takeWhile產(chǎn)生的Observable就完結(jié)

參數(shù):?takeWhile(判定函數(shù), 布爾值)

// 這里關(guān)注第二個參數(shù)
import { range, takeWhile } from "rxjs";
range(1, 10)
 ?.pipe(
 ? ? ?takeWhile(
 ? ? ? ? ?(val) => val < 3, true
 ? ? ?)
 ?)
 ?.subscribe((res) => console.log(res));
range(1, 10)
 ?.pipe(
 ? ? ?takeWhile(
 ? ? ? ? ?(val) => val < 3, false
 ? ? ?)
 ?)
 ?.subscribe((res) => console.log(res));

注意:?第二個參數(shù)表示是否將第一次導(dǎo)致判定函數(shù)結(jié)果為false的那個值發(fā)射出去,默認(rèn)是false,表示不發(fā)射,true則表示發(fā)射。

=> takeUntil操作符 <=

說明:?它接受一個Observable對象,在這個對象沒有吐出數(shù)據(jù)之前,上游的數(shù)據(jù)會直接傳遞給下游,在參數(shù)對象吐出第一個數(shù)據(jù)時,上游的數(shù)據(jù)就不能傳遞給下游了。其次參數(shù)對象出現(xiàn)錯誤的時候,這個錯誤會傳遞給下游,此時上游數(shù)據(jù)也不能傳遞給下游了

參數(shù):?takeUntil(Observable對象)

// 假如使用interval創(chuàng)建數(shù)據(jù),在第三秒的時候停止
import { interval, takeUntil, timer } from "rxjs";
interval(1000)
 ?.pipe(
 ? ? ?takeUntil(timer(3000))
 ?)
 ?.subscribe((res) => console.log(res));

=> skip操作符 <=

作用:?跳過上游的前n個值,然后從上游的第n+1個值開始傳遞給下游,這個操作符不關(guān)心最后一個值是什么,所以這個操作符的上游不管會不會完結(jié)下游都會有值。

參數(shù):?skip(跳過的個數(shù))

import { interval, skip } from "rxjs";
// 跳過前兩個值
interval(1000)
 ?.pipe(skip(2))
 ?.subscribe((res) => console.log(res));

=> skipLast操作符 <=

作用:?可以理解成去除上游的最后n個值,然后將剩下的值傳遞給下游;

參數(shù):?skipLast(跳過的n個值)

import { interval, skipLast, of } from "rxjs";
// 一個完結(jié)的對象
of("a", "b", "c")
 ?.pipe(skipLast(2))
 ?.subscribe((res) => console.log(res));
// 不會完結(jié)的對象
interval(1000)
 ?.pipe(skipLast(2))
 ?.subscribe((res) => console.log(res));

注意:?上游沒有完結(jié)下游依然可以收到數(shù)據(jù)

=> skipWhile操作符 <=

說明:?它接收一個函數(shù)作為參數(shù),上游的每一個數(shù)據(jù)都會執(zhí)行這個函數(shù),只要有一個數(shù)據(jù)在函數(shù)中的返回值是false,那么這個數(shù)據(jù)之前的數(shù)據(jù)都會被過濾調(diào)用,剩下的數(shù)據(jù)會傳遞給下游。

參數(shù):?skipWhile(處理函數(shù))

import { interval, skipWhile } from "rxjs";
interval(1000)
 ?.pipe(skipWhile((val) => val % 2 === 0))
 ?.subscribe((res) => console.log(res));

=> skipUntil操作符 <=

作用:?用于在一個Observable中跳過一些值,直到另一個Observable發(fā)出了特定的信號或者達(dá)到某種狀態(tài)。

參數(shù):?skipUntil(Observable對象)

import { interval, timer, skipUntil } from "rxjs";
// 創(chuàng)建一個每秒發(fā)出一個值的Observable
const source$ = interval(1000);
// 創(chuàng)建一個在5秒后發(fā)出第一個值的Observable
const trigger$ = timer(5000);
// 使用skipUntil操作符,跳過source$的值,直到trigger$發(fā)出第一個值
const example$ = source$.pipe(skipUntil(trigger$));
const subscription = example$.subscribe((val) => console.log(val));

(2)有損回壓控制

解釋:?如果數(shù)據(jù)管道中某一個環(huán)節(jié)處理數(shù)據(jù)的速度跟不上數(shù)據(jù)涌現(xiàn)的速度,上游無法把數(shù)據(jù)推送給下游,就會在緩沖區(qū)中積壓數(shù)據(jù),這就相當(dāng)于對上游施加了壓力,這就是RxJS世界中的回壓。

處理:?造成這種現(xiàn)象的原因是數(shù)據(jù)管道中某個環(huán)節(jié)數(shù)據(jù)涌?的速度超過了處理速度,那么,既然處理不過來,干脆就舍棄掉某些涌現(xiàn)的數(shù)據(jù),這種方式稱為有損回壓控制

可選的調(diào)度器:
asyncScheduler:這是默認(rèn)的調(diào)度器,它使用setTimeout或setInterval來安排任務(wù)的執(zhí)行。它適用于異步操作。 queueScheduler:這個調(diào)度器會按順序執(zhí)行任務(wù),并且會等待當(dāng)前任務(wù)完成后才執(zhí)行下一個任務(wù)。適用于同步操作。 animationFrameScheduler:這個調(diào)度器會根據(jù)瀏覽器的刷新率來執(zhí)行任務(wù),通常用于實現(xiàn)動畫效果或者對性能要求較高的操作。 asapScheduler:這個調(diào)度器會盡可能快地在當(dāng)前執(zhí)行棧中執(zhí)行任務(wù),但是會在微任務(wù)隊列中等待其他任務(wù)完成后執(zhí)行。適用于需要盡快執(zhí)行的任務(wù)。 TestScheduler:這是用于測試的調(diào)度器,可以用來模擬時間的流逝,方便測試 RxJS 代碼。
可選參數(shù)對象:
leading:布爾值,表示是否在節(jié)流周期的開始時立即發(fā)出第一個值。默認(rèn)為true。 trailing:布爾值,表示是否在節(jié)流周期結(jié)束時發(fā)出最后一個值。默認(rèn)為false。

=> throttleTime操作符 <=

說明:?在一個時間范圍內(nèi),上游傳遞給下游的數(shù)據(jù)只能傳遞一個;這里參數(shù)如果只傳一個,其它值都會使用默認(rèn)值;

參數(shù):?throttleTime(時間范圍, 調(diào)度器, 可選參數(shù)對象)

import { 
 ? ? ? ?interval,
 ? ? ? ?throttleTime,
 ? ? ? ?asyncScheduler
} from "rxjs";
// 這里每隔1s產(chǎn)生一個數(shù)字
interval(1000)
 ?.pipe(
 ? ? ?throttleTime(
 ? ? ? ? ? ? ? ? ? ? ?2000,
 ? ? ? ? ? ? ? ? ? ? ?asyncScheduler,
 ? ? ? ? ? ? ? ? ? ? ?// trailing為true時產(chǎn)生的結(jié)果是:2、4、6...
 ? ? ? ? ? ? ? ? ? ? ?// leading為true時產(chǎn)生的結(jié)果是:3、6、9...
 ? ? ? ? ? ? ? ? ? ? ?{ leading: false, trailing: true }
 ? ? ? ? ? ? ? ? ?)
 ? ? ?)
 ?.subscribe((res) => console.log(res));

=> debounceTime操作符 <=

說明:?在一個時間范圍內(nèi),一直有數(shù)據(jù)產(chǎn)生一直不會將數(shù)據(jù)傳遞給下游,只有在這個時間外產(chǎn)生的第一個數(shù)據(jù)才會傳遞給下游;所以產(chǎn)生數(shù)據(jù)的間隔需要大于這個時間范圍才可以

參數(shù):?throttleTime(時間范圍, 調(diào)度器)

import { interval, debounceTime, asyncScheduler } from "rxjs";
// 這里的值如果比2000還小那么就不會有數(shù)據(jù)打印出來
interval(4000)
 ?.pipe(debounceTime(2000, asyncScheduler))
 ?.subscribe((res) => console.log(res));

=> throttle和debounce操作符 <=

作用:?這兩個都是使用Observable中的數(shù)據(jù)來控制流量,區(qū)別在于時機(jī)不同而已

參數(shù):?throttle(處理函數(shù), 可選參數(shù)對象)

參數(shù):?debounce(處理函數(shù))

// 這里以throttle為例
import { interval, timer, throttle } from "rxjs";
const source$ = interval(1000);
// 處理函數(shù)的參數(shù)只能拿到上游的數(shù)據(jù)
const durationSelector = (value) => {
 ?console.log(`# call durationSelector with ${value}`);
 ?return timer(2000);
};
const result$ = source$.pipe(throttle(durationSelector));
result$.subscribe(console.log);

理解:?當(dāng)source$產(chǎn)生第一個數(shù)據(jù)0的時候,throttle就和throttleTime一樣,毫不 猶豫地把這個數(shù)據(jù)0傳給了下游,在此之前會將這個數(shù)據(jù)0作為參數(shù)調(diào)用 durationSelector,然后訂閱durationSelector返回的Observable對象,在這個 Observable對象產(chǎn)生第一個對象之前,所有上游傳過來的數(shù)據(jù)都會被丟棄,于是,source$產(chǎn)生的數(shù)據(jù)1就被丟棄了,因為durationSelector返回的 Observable對象被訂閱之后2000毫秒才會產(chǎn)生數(shù)據(jù)。 這個過程,相當(dāng)于throttle每往下游傳遞一個數(shù)據(jù),都關(guān)上了上下游之間閘門,只有當(dāng)durationSelector產(chǎn)生數(shù)據(jù)的時候才打開這個閘門。到了2000毫秒的時刻,durationSelector第二次被調(diào)用產(chǎn)生的Observable對象終于產(chǎn)生了多個數(shù)據(jù),閘門被打開,source$產(chǎn)生的第三個數(shù)據(jù)2正好趕上,被 傳遞給了下游,同時關(guān)上閘門,這時候throttle會立刻退訂上一次 durationSelector返回的Observable對象,重新將數(shù)據(jù)2作為參數(shù)調(diào)用 durationSelector來獲得一個新的Observable對象,這個新的Observable對象產(chǎn)生數(shù)據(jù)的時候,閘門才會再次打開??梢?,durationSelector產(chǎn)生Observable對象只有第一個產(chǎn)生的數(shù)據(jù)會有作用,而且這個數(shù)據(jù)的產(chǎn)生時機(jī)是關(guān)鍵,至于這個數(shù)據(jù)是個什么值不重要。

=> auditTime和audit操作符 <=

說明:?這兩個都是在一個時間內(nèi),將最后一個產(chǎn)生的值發(fā)射出去,其余的值會被忽略掉。它們之間的區(qū)別是一個使用時間范圍管理,一個使用函數(shù)管理

參數(shù):?auditTime(時間范圍, 可選參數(shù)對象)

參數(shù):?audit(處理函數(shù))

import { interval, auditTime } from "rxjs";
interval(1000)
 ? ?.pipe(auditTime(3000))
 ? ?.subscribe(
 ? ? ? ?(val) => console.log("auditTime:", val)
 ? ?); ? ? ? ? ?
// 第一個3s:0、1、2、3 --> 三秒末也是四秒初發(fā)出值3
// 第二個3s:4、5、6、7 --> 六秒末也是七秒初發(fā)出值7
// ...

理解:?上面的時間寫3s,所以在第一個3s內(nèi)產(chǎn)生了值0、1、2,在第3s結(jié)束的時候,產(chǎn)生了值3,根據(jù)定義,所以第一個3s發(fā)出的值是3,在物理上,第n秒結(jié)束的時候,也就是第n+1秒開始的時候,所以下一個3s是從第四秒開始,然后這個時間內(nèi)產(chǎn)生4、5、6,第7s結(jié)束的時候,產(chǎn)生值7,將其傳遞給下游...后面的值都是這樣產(chǎn)生的,也就是它發(fā)出一個值傳遞到下游之后,它會等待下一個值到達(dá),才會開始其計時

=> sampleTime和sample操作符 <=

說明:?sampleTime的作用是搜尋一個時間范圍內(nèi)的最后一個數(shù)據(jù),將其傳遞給下游,如果這個時間范圍里面沒有值則不會傳值到下游,然后繼續(xù)下一個時間范圍的搜尋; 而sample有點不同,它的參數(shù)接收一個Observable對象來控制Observable,這個參數(shù)被稱為notifier,當(dāng)notifier產(chǎn)生一個數(shù)據(jù)的時候, sample就從上游拿最后一個產(chǎn)生的數(shù)據(jù)傳給下游。

參數(shù):?sampleTime(時間范圍, 調(diào)度器)

參數(shù):?sample(observable對象)

interval(1000)
 ?.pipe(sampleTime(2000))
 ?.subscribe((res) => console.log("sampleTime:", res));

理解:?上面數(shù)據(jù)是每隔1s產(chǎn)生一個,然后我搜尋時間范圍是2s,第一個2s,產(chǎn)生值0、1,將1傳遞出去,繼續(xù)第二個2s的搜尋,產(chǎn)生值2、3,將3傳遞出去...以此類推

(3)去重

=> distinct操作符 <=

作用:?上游同樣的數(shù)據(jù)只有第一次產(chǎn)生時會傳給下游,其余的都被舍棄掉了,判斷是否相等使用的是===

參數(shù):?distinct(一個函數(shù)來定制需要對比什么屬性, 一個Observable對象用于清空數(shù)據(jù))

場景一: 基本使用
import { distinct, of } from "rxjs";
of(1, 3, 2, 5, 7, 1, 2)
 ?.pipe(distinct())
 ?.subscribe((res) => console.log(res));


場景二:?對對象使用

import { distinct, of } from "rxjs";
of(
 ?{ name: "RxJS", version: "v4" },
 ?{ name: "React", version: "v15" },
 ?{ name: "React", version: "v16" },
 ?{ name: "RxJS", version: "v5" }
)
 ?// 這里規(guī)定數(shù)據(jù)中的name字段相同就算相同數(shù)據(jù)
 ?.pipe(distinct((x) => x.name))
 ?.subscribe((res) => console.log(res));

第二個參數(shù):?distinct在運作的時候自己會先創(chuàng)建一個集合,里面存放上游的不同數(shù)據(jù),每次上游傳遞一個數(shù)據(jù)出來就對比集合中是否有元素跟它相等,相等就舍棄,如果上游數(shù)據(jù)無限多切都是不同的,那么這個集合就會有無限的數(shù)據(jù)在里面,這就存在數(shù)據(jù)壓力,為了解決這個問題,可以使用第二個可選參數(shù),當(dāng)這個Observable對象產(chǎn)生數(shù)據(jù)的時候,這個集合中的數(shù)據(jù)就會被清空。

=> distinctUntilChanged操作符 <=

作用:?將上游中的連續(xù)數(shù)據(jù)過濾掉

參數(shù):?distinctUntilChanged(比較函數(shù))

import { distinctUntilChanged, of } from "rxjs";
of(
 ?{ name: "RxJS", version: "v4" },
 ?{ name: "React", version: "v15" },
 ?{ name: "React", version: "v16" },
 ?{ name: "RxJS", version: "v5" }
)
 ?// a表示上一個值,b表示當(dāng)前值
 ?.pipe(distinctUntilChanged((a, b) => a.name === b.name))
 ?.subscribe((res) => console.log(res));

注意:?比較函數(shù)需要返回布爾值來確定由哪些屬性決定數(shù)據(jù)相等

(4)其它

=> ignoreElements操作符 <=

作用:?忽略上游所有元素,只關(guān)心complete和error事件

參數(shù):?沒有參數(shù)

import { ignoreElements, of } from "rxjs";
of(1, 2, 3)
 ?.pipe(ignoreElements())
 ?.subscribe((res) => console.log(res));

=> elementAt操作符 <=

說明:?把上游數(shù)據(jù)當(dāng)數(shù)組,只獲取指定下標(biāo)的那?個數(shù)據(jù),如果找不到,則拋出一個錯誤事件,如果不想出現(xiàn)錯誤,可以使用第二個參數(shù),在找不到的時候,會將第二個參數(shù)做為默認(rèn)值傳遞給下游

參數(shù):?elementAt(下標(biāo), 默認(rèn)值)

import { elementAt, of } from "rxjs";
of(1, 2, 3)
 ?.pipe(elementAt(3, "使用默認(rèn)值作為數(shù)據(jù)傳遞給下游"))
 ?.subscribe((res) => console.log(res));

=> single操作符 <=

作用:?檢查上游是否只有一個滿足對應(yīng)條件的數(shù)據(jù),如果答案為是,就向下游傳遞這個數(shù)據(jù);如果答案為否,就向下游傳遞一個異常

參數(shù):?single(過濾函數(shù))

import { of, single } from "rxjs";
of(1, 2, 3)
 ?.pipe(single((x) => x % 2 === 0))
 ?.subscribe((res) => console.log(res));

七、轉(zhuǎn)化數(shù)據(jù)流

(1)映射數(shù)據(jù)

理解:?映射數(shù)據(jù)是最簡單的轉(zhuǎn)化形式。假如上游的數(shù)據(jù)是A、B、C、D的序列,那么可以認(rèn)為經(jīng)過轉(zhuǎn)化類操作符之后,就會變成f(A)、f(B)、f(C)、f(D)的序列,其中f是一個函數(shù),作用于上游數(shù)據(jù)之后,產(chǎn)生的就是傳給下游新的數(shù)據(jù)

=> map操作符 <=

說明:?它接受一個函數(shù)作為參數(shù),這個函數(shù)通常稱為project,指定了數(shù)據(jù)映射的邏輯,每當(dāng)上游推下來一個數(shù)據(jù),map就把這個數(shù)據(jù)作為參數(shù)傳給map的參數(shù)函數(shù),然后再把函數(shù)執(zhí)行的返回值推給下游

參數(shù):?map(處理函數(shù))

import { of, map } from "rxjs";
of(1, 2, 3)
 ?.pipe(
 ? ?map((item, index) => {
 ? ? ?// 處理函數(shù)的item表示當(dāng)前值,index表示當(dāng)前值得索引
 ? ? ?console.log(item, index);
 ? ?})
 ?)
 ?.subscribe();

2)無損回壓控制

說明:?把上游在一段時間內(nèi)產(chǎn)生的數(shù)據(jù)放到一個數(shù)據(jù)集合中,當(dāng)時機(jī)合適時,把緩存的數(shù)據(jù)匯聚到一個數(shù)組或者Observable對象傳給下游,這就是無損回壓控制

=> windowTime和bufferTime操作符 <=

作用:?用一個參數(shù)來指定產(chǎn)生緩沖窗口的時間間隔,以此緩存上游的數(shù)據(jù)

參數(shù):?windowTime(劃分區(qū)塊間隔, 內(nèi)部區(qū)塊開始間隔, 最多緩存數(shù)據(jù)個數(shù))

參數(shù):?bufferTime(劃分區(qū)塊間隔, 內(nèi)部區(qū)塊開始間隔, 最多緩存數(shù)據(jù)個數(shù))

場景一: 基本使用
import { timer, windowTime } from "rxjs";
const source$ = timer(0, 1000);
const result$ = source$.pipe(windowTime(4000));

理解:?windowTime的參數(shù)是4000,也就會把時間劃分為連續(xù)的4000毫秒長度區(qū)塊,在每個時間區(qū)塊中,上游傳下來的數(shù)據(jù)不會直接送給下游,而是在該時間區(qū)塊的開始就新創(chuàng)建一個Observable對象推送給下游,然后在這個時間區(qū)塊內(nèi)上游產(chǎn)生的數(shù)據(jù)放到這個新創(chuàng)建的Observable對象中。在每個4000毫秒的時間區(qū)間內(nèi),上游的每個數(shù)據(jù)都被傳送給對應(yīng)時間區(qū)間的內(nèi)部Observable對象中,當(dāng)4000毫秒時間一到,這個區(qū)間的內(nèi)部Observable對象就會完結(jié),將結(jié)果打印出來會發(fā)現(xiàn)控制臺每隔1000毫秒打印一個數(shù)字出來,因此windowTime把上游數(shù)據(jù)傳遞出去是不需要延遲的

import { bufferTime, timer } from "rxjs";
const source$ = timer(0, 1000);
const result$ = source$
 ?.pipe(bufferTime(4000))
 ?.subscribe((res) => console.log(res));

理解:?bufferTime產(chǎn)?的是普通的Observable對象,其中的數(shù)據(jù)是數(shù)組形式, bufferTime會把時間區(qū)塊內(nèi)的數(shù)據(jù)緩存,在時間區(qū)塊結(jié)束的時候把所有緩存的數(shù)據(jù)放在一個數(shù)組再傳給下游,在控制臺你會看見每隔4秒打印一個數(shù)組,因此bufferTime把上游數(shù)據(jù)傳遞出去是需要延遲的

場景二: 第二個參數(shù)

作用:?指定每個時間區(qū)塊開始的時間間隔。

import { timer, windowTime } from "rxjs";
const source$ = timer(0, 1000);
source$.pipe(windowTime(4000, 2000)).subscribe();

理解:?windowTime使用第二個參數(shù)200之后,產(chǎn)生內(nèi)部Observable的頻率更高了,每200毫秒就會產(chǎn)生一個內(nèi)部Observable對象, 而且各內(nèi)部Observable對象中的數(shù)據(jù)會重復(fù),例如數(shù)據(jù)2和3就同時出現(xiàn)在第一個和第二個內(nèi)部Observable對象中

import { bufferTime, timer } from "rxjs";
const source$ = timer(0, 1000);
source$
 ? ?.pipe(bufferTime(4000, 2000, 2))
 ? ?.subscribe(console.log);

理解:?對于bufferTime,因為需要緩存上游數(shù)據(jù),不管參數(shù)設(shè)定的數(shù)據(jù)區(qū)間有多短,都無法預(yù)期在這段時間內(nèi)上游會產(chǎn)生多少數(shù)據(jù),如果上游在短時間內(nèi)爆發(fā)出很多數(shù)據(jù),那就會給bufferTime很大的內(nèi)存壓力,為了防止出現(xiàn)這種情況可以使用第三個可選參數(shù)來指定每個時間區(qū)間內(nèi)緩存的最多數(shù)據(jù)個數(shù)。

注意:?如果第一個參數(shù)比第二個參數(shù)大,那么就有可能出現(xiàn)數(shù)據(jù)重復(fù),如果第二個參數(shù)比第一個參數(shù)大,那么就有可能出現(xiàn)上游數(shù)據(jù)的丟失。之所以說“有可能”,是因為丟失或者重疊的時間區(qū)塊中可能上游沒有產(chǎn)生數(shù)據(jù),所以也就不會引起上游數(shù)據(jù)的丟失和重復(fù)。從這個意義上說來,windowTime和bufferTime如果用上了第二個參數(shù),也未必是“止損”的回壓控制。

=> windowCount和bufferCount操作符 <=

作用:?根據(jù)數(shù)據(jù)個數(shù)來決定內(nèi)部的一個Observabe需要保存多少數(shù)據(jù)。

參數(shù):?windowCount(時間區(qū)間長度, 隔幾個數(shù)據(jù)重新開一個區(qū)間)

import { timer, windowCount } from "rxjs";
const source$ = timer(0, 1000);
source$.pipe(windowCount(4)).subscribe(console.log);
import { timer, windowCount } from "rxjs";
const source$ = timer(0, 1000);
source$.pipe(windowCount(4, 5)).subscribe(console.log);

理解:?windowCount還支持可選的第二個參數(shù),如果不使用第二個參數(shù),那么所有的時間區(qū)間沒有重疊部分;如果使用了第二個參數(shù),那么第二個參數(shù)依然是時間區(qū)間的長度,但是每間隔第二個參數(shù)毫秒數(shù),就會新開一個時間區(qū)間

說明:?對于bufferCount,和windowCount一樣,區(qū)別只是傳給下游的是緩存數(shù)據(jù)組成的數(shù)組

=> windowWhen和bufferWhen操作符 <=

說明:?它們接受一個函數(shù)作為參數(shù),這個函數(shù)返回一個Observable對象,用于控制上游的數(shù)據(jù)分割,每當(dāng)返回的Observable對象產(chǎn)生數(shù)據(jù)或者完結(jié)時,windowWhen就認(rèn)為是一個緩沖區(qū)塊的結(jié)束,重新開啟一個緩沖窗口。bufferWhen跟這個是類似的

參數(shù):?windowWhen(處理函數(shù))

import { timer, windowWhen } from "rxjs";
const source$ = timer(0, 100);
const closingSelector = () => {
 ?return timer(400);
};
// 被訂閱的時候windowWhen就開始?作,?先開啟?個緩沖
// 窗口,然后?刻調(diào)?closingSelector獲得?個Observable對象,
// 在這個Observable對象輸出數(shù)據(jù)的時候,當(dāng)前的緩沖窗?就關(guān)閉,
// 同時開啟?個新的緩沖窗口,然后再次調(diào)?closingSelector
// 獲得?個Observable對象
source$.pipe(windowWhen(closingSelector));

=> windowToggle和bufferToggle操作符 <=

說明:?利?Observable來控制緩沖窗口的開和關(guān)。它需要兩個參數(shù),第一個參數(shù)是一個Observable對象,當(dāng)產(chǎn)生一個數(shù)據(jù),代表一個緩沖窗口的開始;同時,第二個參數(shù)是一個函數(shù),它也會被調(diào)用,用來獲得緩沖窗口結(jié)束的通知;其次函數(shù)的參數(shù)是第一個參數(shù)產(chǎn)生的數(shù)據(jù),這樣就可以由前一個參數(shù)控制緩沖窗口的開始時機(jī),函數(shù)控制其關(guān)閉時機(jī),從而控制產(chǎn)生高階Observable的節(jié)奏;同理bufferToggle也是類似的

import { timer, windowToggle } from "rxjs";
const source$ = timer(0, 100);
const openings$ = timer(0, 400);
const closingSelector = (value) => {
 ?return value % 2 === 0 ? timer(200) : timer(100);
};
// opening$每400毫秒產(chǎn)??個數(shù)據(jù),所以每400毫秒就會有?個
// 緩沖區(qū)間開始。每當(dāng)opening$產(chǎn)??個數(shù)據(jù)時,closingSelector
// 就會被調(diào)?返回控制對應(yīng)緩沖區(qū)間結(jié)束的Observable對象,
// 如果參數(shù)為偶數(shù),就會延時200毫秒產(chǎn)??個數(shù)據(jù),否則就延時100
// 毫秒產(chǎn)??個數(shù)據(jù)
source$.pipe(windowToggle(openings$, closingSelector));

=> window和buffer操作符 <=

說明:?保持一個Observable類型的參數(shù),稱為notifier$,每當(dāng)notifer$產(chǎn)生一個數(shù)據(jù),既是前一個緩存窗口的結(jié)束,也是后一個緩存窗口的開始;如果這個Observable完結(jié)了,那么window產(chǎn)生的一階Observable對象也會完結(jié),buffer也是類似的

參數(shù):?window(一個Observable對象)

import { timer, window } from "rxjs";
const source$ = timer(0, 100);
// 一個不會完結(jié)的Observable
const notifer$ = timer(400, 400);
source$.pipe(window(notifer$));
import { timer, window } from "rxjs";
const source$ = timer(0, 100);
// 一個會完結(jié)的Observable
const notifer$ = timer(400);
source$.pipe(window(notifer$));

(3)高階map

說明:?傳統(tǒng)map與高階map的區(qū)別在于其函數(shù)參數(shù)的返回值,前者是將一個數(shù)據(jù)映射成另一個數(shù)據(jù),而后者是將一個數(shù)據(jù)轉(zhuǎn)變成一個Observable

import { interval, map } from "rxjs";
const source$ = interval(200);
// 這里每個數(shù)據(jù)都會轉(zhuǎn)換成一個包含數(shù)字0、1、2、3、4的
// Observable對象
source$.pipe(
 ? ? ? ? ? ?map(
 ? ? ? ? ? ? ? ?() => interval(100).take(5)
 ? ? ? ? ? ?)
 ? ? ? ?);

=> concatMap操作符 <=

說明:?可以理解成concatMap = map + concatAll

import { interval, concatMap } from "rxjs";
const source$ = interval(200);
source$.pipe(
 ? ? ? ? ? ?concatMap(
 ? ? ? ? ? ? ? ?() => interval(100).take(5)
 ? ? ? ? ? ?)
 ? ? ? ?);

理解:?第一個內(nèi)部Observable對象中的數(shù)據(jù)被完整傳遞給了 concatMap的下游,但是,第一個產(chǎn)生的內(nèi)部Observable對象沒有那么快處理,只有到第一個內(nèi)部Observable對象完結(jié)之后,concatMap才會去訂閱第二個內(nèi)部Observable,這樣就導(dǎo)致第二個內(nèi)部Observable對象中的數(shù)據(jù)排在了后面,絕不會和第一個內(nèi)部Observable對象中的數(shù)據(jù)交叉。

=> mergeMap操作符 <=

說明:?可以理解成mergeMap = map + mergeAll

注意:?一旦內(nèi)部Observable發(fā)出一個值,它就會立即將該值傳遞給下游觀察者,而不管其他內(nèi)部Observable是否已經(jīng)發(fā)出或者完成了

import { interval, mergeMap, take } from "rxjs";
const source$ = interval(200).take(2);
source$.pipe(
 ? ? ? ? ? ?mergeMap(
 ? ? ? ? ? ? ? ?() => interval(100).take(5)
 ? ? ? ? ? ?)
 ? ? ? ?);

=> switchMap操作符 <=

說明:?可以理解成switchMap = map + switchAll

注意:?后產(chǎn)生的內(nèi)部Observable對象優(yōu)先級總是更高,只要有新的內(nèi)部Observable對象產(chǎn)生,就立刻退訂之前的內(nèi)部 Observable對象,改為從最新的內(nèi)部Observable對象拿數(shù)據(jù)

import { interval, switchMap, take } from "rxjs";
const source$ = interval(200).take(2);
source$.pipe(
 ? ? ? ? ? ?switchMap(
 ? ? ? ? ? ? ? ?() => interval(100).take(5)
 ? ? ? ? ? ?)
 ? ? ? ?);

4)分組

=> groupBy操作符 <=

參數(shù):?groupBy(一個處理函數(shù),用于得到數(shù)據(jù)的key值)

機(jī)制:?對于上游推送下來的任何數(shù)據(jù),檢查這個數(shù)據(jù)的key值,如果這個key值是第一次出現(xiàn),就產(chǎn)生一個新的內(nèi)部Observable對象,同時這個數(shù)據(jù)就是內(nèi)部Observable對象的第一個數(shù)據(jù);如果key值已經(jīng)出現(xiàn)過,就直接把這個數(shù)據(jù)塞給對應(yīng)的內(nèi)部Observable對象

import { groupBy, interval } from "rxjs";
const source$ = interval(200);
source$.pipe(groupBy((val) => val % 2));

理解:?groupBy的函數(shù)參數(shù)取的是參數(shù)除以2的余數(shù),所以會產(chǎn)生兩個key值:0和1。從彈珠圖中可以看到,0和2屬于第一個內(nèi)部 Observable對象,第一個內(nèi)部Observable對象收納所有key值為0的數(shù)據(jù),1 和3屬于第二個內(nèi)部Observable對象,因為它們對應(yīng)的key值為1

=> partition操作符 <=

說明:?partition接受一個判定函數(shù)作為參數(shù),對上游的每個數(shù)據(jù)進(jìn)行判定,滿足條件的放一個Observable對象,不滿足條件的放到另一個Observable對象,就這樣來分組,它返回的是一個數(shù)組,包含兩個元素,第一個元素是容納滿組判定條件的Observable對象,第二個元素當(dāng)然是不滿足判定條件的Observable對象。

參數(shù):?partition(數(shù)據(jù)源, 判定函數(shù))

import { partition, timer } from "rxjs";
const source$ = timer(0, 100);
// 解構(gòu)賦值
const [even$, odd$] = partition(source$, (x) => x % 2 === 0);
even$.subscribe((value) => console.log("even:", value));
odd$.subscribe((value) => console.log("odd:", value));

注意:?使用 partition一般也不會在后面直接使用鏈?zhǔn)秸{(diào)用,需要把結(jié)果以變量存儲,然后分別處理結(jié)果中的兩個Observable對象

(5)累計數(shù)據(jù)

=> scan操作符 <=

說明:?與reduce操作符類似,它也有一個求和函數(shù)參數(shù)和一個可選的seed種子參數(shù)作為求和初始值。scan和reduce的區(qū)別在于scan對上游每一個數(shù)據(jù)都會產(chǎn)生一個求和結(jié)果,reduce是對上游所有數(shù)據(jù)進(jìn)行求和,reduce最多只給下游傳遞一個數(shù)據(jù),如果上游數(shù)據(jù)永不完結(jié),那reduce也永遠(yuǎn)不會產(chǎn)生數(shù)據(jù),scan完全可以處理一個永不完結(jié)的上游Observable對象

參數(shù):?scan(求和函數(shù), 初始值)

import { interval, scan } from "rxjs";
const source$ = interval(1000);
source$
 ?.pipe(
 ? ?// sum:上一次求和后的值
 ? ?// current:當(dāng)前需要進(jìn)行求和的值
 ? ?scan((sum, current) => {
 ? ? ?console.log(sum, current);
 ? ? ?return sum + current;
 ? ?})
 ?)
 ?.subscribe();

理解:?scan的規(guī)約函數(shù)參數(shù)把之前求和的值加上當(dāng)前數(shù)據(jù)作為求和結(jié)果,每一次上游產(chǎn)生數(shù)據(jù)的時候,這個求和函數(shù)都會被調(diào)用,結(jié)果會傳給下游,同時結(jié)果也會由scan保存,作為下一次調(diào)用規(guī)約函數(shù)時的sum參數(shù)

=> mergeScan操作符 <=

說明:?它在使用的時候跟scan是類似的,不過它的返回值是一個Observable對象

機(jī)制:?每當(dāng)上游推送一個數(shù)據(jù)下來,mergeScan就調(diào)用一次求和函數(shù),并且訂閱返回的Observable對象,之后,這個Observable對象會使用類似merge的方式與下游合并,此時mergeScan會記住傳給下游的最后一個數(shù)據(jù),當(dāng)上游再次推送數(shù)據(jù)下來的時候,就把最后一次傳遞給下游的數(shù)據(jù)作為求和函數(shù)的sum參數(shù)

注意:?如果mergeScan返回一個復(fù)雜或者不會完結(jié)的Observable對象,可能會導(dǎo)致上游數(shù)據(jù)和返回的Observable對象會交叉?zhèn)鬟f數(shù)據(jù)給下游,這樣那個值是最后一次傳遞給下游的會很難確定,因此在使用的時候返回的Observable里面包含的值盡量簡單

八、錯誤處理

說明:?錯誤異常和數(shù)據(jù)一樣,會沿著數(shù)據(jù)流管道從上游向下游流動,流過所有的過濾類或者轉(zhuǎn)化類操作符,最后會觸發(fā)Observer的error方法,不過也不是所有錯誤都交給Observer處理,不然它需要處理的東西就太多了,此時就需要在數(shù)據(jù)管道中處理掉,這里處理異常有兩類方法:恢復(fù)和重試。在實際應(yīng)用中,重試和恢復(fù)往往配合使用,因為重試往往是有次數(shù)限制的,不能無限重試,如果嘗試了次數(shù)上限之后得到的依然是錯誤異常, 還是要用“恢復(fù)”的方法獲得默認(rèn)值繼續(xù)運算。

恢復(fù):就是本來雖然產(chǎn)生了錯誤異常,但是依然讓運算繼續(xù)下去。最常見的場景就是在獲取某個數(shù)據(jù)的過程中發(fā)生了錯誤,這時候雖然沒有獲得正確數(shù)據(jù),但是用一個默認(rèn)值當(dāng)做返回的結(jié)果,讓運算繼續(xù)。 重試:就是當(dāng)發(fā)現(xiàn)錯誤異常的時候,認(rèn)為這個錯誤只是臨時的,重新嘗試之前發(fā)生錯誤的操作,寄希望于重試之后能夠獲得正常的結(jié)果,其本質(zhì)是在訂閱上游的同時,退訂上一次訂閱的內(nèi)容

=> catchError操作符 <=

作用:?會在管道中捕獲上游傳遞過來的錯誤

參數(shù):?catchError(異常函數(shù))

import { range, map, catchError, of } from "rxjs";
// 產(chǎn)生數(shù)據(jù)1、2、3、4、5
const source$ = range(1, 5);
// 遍歷數(shù)據(jù)發(fā)現(xiàn)在4這個位置會拋出一個錯誤
const error$ = source$.pipe(
 ?map((value) => {
 ? ?if (value === 4) {
 ? ? ?throw new Error("unlucky number 4");
 ? ?}
 ? ?return value;
 ?})
);
// 此時錯誤會被catchError的處理函數(shù)所接收
const catch$ = error$
 ?.pipe(
 ? ?// err:被捕獲的錯誤
 ? ?// caught$:上游緊鄰的那個Observable對象,此處就是指error$了
 ? ?catchError((err, caught$) => {
 ? ?
 ? ? ?// 函數(shù)的返回值是一個Observable對象,用來替代發(fā)生錯誤的那個數(shù)據(jù),然后傳遞給下游
 ? ? ?return of(8);
 ? ?})
 ?)
 ?// 錯誤被catchError捕獲處理,所以此處不存在錯誤
 ?.subscribe(console.log);

注意:?異常函數(shù)的第一個參數(shù)caught$比較有意思,因為它代表的是上游的 Observable對象,如果異常函數(shù)就返回caught$的話,相當(dāng)于讓上游Observable 重新試一遍,所以,catch這個操作符其實不光有恢復(fù)的功能,也有重試的功能

=> retry操作符 <=

第一種參數(shù): 直接傳一個數(shù)字

說明:?它可以讓上游的Observable重新試一遍,以達(dá)到重試的目的,它接受一個數(shù)值參數(shù)number,number等于指定重試的次數(shù), 如果number為負(fù)數(shù)或者沒有number參數(shù),那么就是無限次retry,直到上游不再拋出錯誤異常為止

參數(shù):?retry(重試的次數(shù))

注意:?retry調(diào)用應(yīng)該有一個正整數(shù)的參數(shù),也就是要指定有限次數(shù)的重試,否則,很可能陷入無限循環(huán),畢竟被重試的上游Observable只是有可能重試成功,意思就是也有可能重試不成功,如果真的運氣不好就是重試不成功,也真沒有必要一直重試下去,因為retry通常要限定重試次數(shù),所以retry通常也要和catch配合使用,重試只是增加獲得成功結(jié)果的概率,當(dāng)重試依然沒有結(jié)果的時候,還是要catch上場做恢復(fù)的操作

import { range, map, catchError, of, retry } from "rxjs";
const source$ = range(1, 5);
const error$ = source$.pipe(
 ?map((value) => {
 ? ?if (value === 4) {
 ? ? ?throw new Error("unlucky number 4");
 ? ?}
 ? ?return value;
 ?})
);
const catch$ = error$
 ?.pipe(
 ? ?// 重復(fù)兩次
 ? ?retry(2),
 ? ?catchError((err, caught$) => {
 ? ? ?return of(8);
 ? ?})
 ?)
 ?.subscribe(console.log);
第二種參數(shù): 傳一個配置對象
配置對象的取值:
count: 表示重試的次數(shù)限制。如果未指定,將會無限次重試,直到成功或者遇到無法處理的錯誤 delay: 表示每次重試之間的延遲時間??梢允且粋€數(shù)字,表示固定的延遲時間,也可以是一個函數(shù),接受錯誤對象和重試次數(shù)作為參數(shù),返回一個 Observable 或 Promise,用于動態(tài)計算延遲時間 resetOnSuccess: 表示是否在成功后重置重試計數(shù)。如果設(shè)置為true,則在每次成功后重置重試計數(shù),否則會保持重試計數(shù)直到達(dá)到設(shè)定的重試次數(shù)或者遇到無法處理的錯誤
注意:
delay地方如果寫一個函數(shù)在這里,這個函數(shù)會在發(fā)生錯誤時被調(diào)用,它有兩個參數(shù),一個是err$表示發(fā)生錯誤的對象, 一個是retryCount表示當(dāng)前重試的次數(shù),它需要一個返回值,不然函數(shù)無法正確的獲取錯誤對象,導(dǎo)致重試不會繼續(xù)下去。
如果delay函數(shù)的返回值是一個Observable對象,那么每次這個對象吐出一個數(shù)據(jù),就會重復(fù)一次,由此可以結(jié)合timer類似的操作符來達(dá)到延遲重復(fù)的目的
import { range, map, catchError, of, retry } from "rxjs";
const source$ = range(1, 5);
const error$ = source$.pipe(
 ?map((value) => {
 ? ?if (value === 4) {
 ? ? ?throw new Error("unlucky number 4");
 ? ?}
 ? ?return value;
 ?})
);
const catch$ = error$
 ?.pipe(
 ? ?// 重復(fù)兩次
 ? ?retry({
 ? ? ?count: 2,
 ? ? ?delay: (err$, retryCount) => {
 ? ? ? ?console.log(err$, retryCount);
 ? ? ? ?// 如果這里沒有返回值,下面只會出現(xiàn)一次重復(fù)
 ? ? ? ?return of(1000);
 ? ? ?},
 ? ?}),
 ? ?catchError((err, caught$) => {
 ? ? ?return of(8);
 ? ?})
 ?)
 ?.subscribe();

=> finalize操作符 <=

說明:?它接受一個回調(diào)函數(shù)作為參數(shù),上游無論是完結(jié)還是出現(xiàn)錯誤這個函數(shù)都會執(zhí)行,只不過在一個數(shù)據(jù)流中只會作用一次,同時這個函數(shù)也無法影響數(shù)據(jù)流。

九、多播

說明:?多播就是讓一個數(shù)據(jù)流的內(nèi)容被多個Observer訂閱

(1)數(shù)據(jù)流的關(guān)系

說明:?這里指的是Observable和Observer的關(guān)系,可以理解成前者播放內(nèi)容,后者接受內(nèi)容,播放的形式有單播、廣播和多播

理解概念:
單播: 就是一個播放者對應(yīng)朵個收聽者,一對朵的關(guān)系,例如,你使用微信給你的朋友發(fā)送信息,這就是單播,你發(fā)送的信息只有你的朋友才能收到
廣播: 例如,有一個好消息你不想只分享給一個人,而是想告訴所有的同事或者同學(xué),你就在辦公室或者教室里大聲吼出這個好消息,所有人都聽見了,這就是“廣播”,不過發(fā)布消息的根本不知道聽眾是什么樣的人,于是篩選消息的責(zé)任就完全落在了接收方的人上,以至于難以控制。
多播: 假如有一些八卦消息,你想要分享給一群朋友,但并不想分享給所有人,或者不想在公共場合大聲嚷嚷,于是你在微信上把相關(guān)朋友拉進(jìn)一個群,在群里說出這個消息,只有被選中的朋友才能收到這條消息,這就叫做“多播”

(2)Subject

承上啟下:?根據(jù)第一部分對兩種Observable的理解不難得到Cold Observable實現(xiàn)的是單播,Hot Observable實現(xiàn)的多播

問題:?如何把Cold Observable變成Hot Observable呢

解決:?在函數(shù)式編程的世界里,有一個要求是保持不可變性,所以,要把一個Cold Observable對象轉(zhuǎn)換成一個Hot Observable對象,并不是去改變這個Cold Observable對象本身,而是產(chǎn)生一個新的Observable對象,包裝之前Cold Observable對象,這樣在數(shù)據(jù)流管道中,新的Observable對象就成為了下游,想要Hot數(shù)據(jù)源的Observer要訂閱的是這個作為下游的Observable對象,所以此時需要一個中間人來完成轉(zhuǎn)化,這個中間人就是Subject

中間人的職責(zé):
要提供subscribe方法,讓其他?能夠訂閱一個的數(shù)據(jù)源,相當(dāng)于一個Observable
要能夠有辦法接受推送的數(shù)據(jù),包括Cold Observable推送的數(shù)據(jù),相當(dāng)于一個Observer

=> 雙重身份 <=

說明:?這里說的是它具有具Observable和Observer的性質(zhì),雖然?個Subject對象是一個Observable,但是這兩個之間存在區(qū)別,區(qū)別在于Subject是存在記憶的,也就是它能夠記住有哪些Observer訂閱了自己,Subject有狀態(tài),這個狀態(tài)就是所有Observer的列表,所以,當(dāng)調(diào)用Subject的next函數(shù)時,才可以把消息通知給所有的Observer

import { Subject } from "rxjs";
const subject = new Subject();
// 1號Observer訂閱了subject
const subscription1 = subject.subscribe(
 ?(value) => console.log("on observer 1 data: " + value),
 ?(err) => console.log("on observer 1 error: " + err.message),
 ?() => console.log("on observer 1 complete")
);
// 調(diào)?subject的next推送了數(shù)據(jù)1,這個消息只有1號Observer響應(yīng),
// 因為當(dāng)前只有?個Observer。同時因為next(1)在2號Observer
// 加?之前執(zhí)?,所以2號Observer沒有接收到1
subject.next(1);
// 2號Observer也訂閱了subject
subject.subscribe(
 ?(value) => console.log("on observer 2 data: " + value),
 ?(err) => console.log("on observer 2 error: " + err.message),
 ?() => console.log("on observer 2 complete")
);
// 這時候調(diào)?subject的next?法推送數(shù)據(jù)2,subject現(xiàn)在知道??
// 有兩個Observer,所以會分別推送消息給1號和2號Observer
subject.next(2);
// subject的1號Observer通過unsubscribe?法退訂
subscription1.unsubscribe();
// 這時候subject知道??只有?個2號Observer,
// 所以,當(dāng)調(diào)?complete?法時,只有2號Observer接到通知
subject.complete();

特點:?后加入的觀察者,并不會獲得加入之前Subject對象上通過next推送的數(shù)據(jù)

實現(xiàn)多播:?既然Subject既有Observable又有Observer的特性,那么,可以讓一個Subject對象成為一個Cold Observable對象的下游,其他想要Hot數(shù)據(jù)源就可以訂閱這個Subject對象來達(dá)到轉(zhuǎn)換的目的,以此完成多播的操作。

=> 不能重復(fù)使用 <=

說明:?Subject對象也是一個Observable對象,但是因為它有完結(jié)的狀態(tài),所以不像Cold Observable對象一樣每次被subscribe都是一個新的開始,正因為如此,Subject對象是不能重復(fù)使用的,所謂不能重復(fù)使用,指的是一個 Subject對象一旦被調(diào)用了complete或者error函數(shù),那么,它作為Observable 的生命周期也就結(jié)束了,后續(xù)還想調(diào)用這個Subject對象的next函數(shù)傳遞數(shù)據(jù)給下游,會沒有任何反應(yīng)。

import { Subject } from "rxjs";
const subject = new Subject();
// ?先1號Observer成為subject的下游
subject.subscribe(
 ?(value) => console.log("on observer 1 data: " + value),
 ?(err) => console.log("on observer 1 error: " + err.message),
 ?() => console.log("on observer 1 complete")
);
// 然后通過subject的next函數(shù)傳遞了1和2
subject.next(1);
subject.next(2);
// 緊接著調(diào)?了subject的complete函數(shù),結(jié)束了subject的?命周期
subject.complete();
// 2號Observer也成為subject的下游,但是,這時候subject已經(jīng)完結(jié)了
subject.subscribe(
 ?(value) => console.log("on observer 2 data: " + value),
 ?(err) => console.log("on observer 2 error: " + err.message),
 ?() => console.log("on observer 2 complete")
);
// 后續(xù)通過next傳遞參數(shù)3的調(diào)?,不會傳遞給2號Observer,
// 也不會傳遞給1號Observer,但是可以獲取subject的complete通知,
// 可以這樣認(rèn)為,當(dāng)?個Subject對象的complete函數(shù)被調(diào)?之后,
// 它暴露給下游的Observable對象就是?個由empty變量產(chǎn)?的直接
// 完結(jié)的Observable對象
subject.next(3);

注意:?在Subject的生命周期結(jié)束之后,再次調(diào)用next方法沒有任何反應(yīng),也不會拋出錯誤,這樣可能會認(rèn)為上游所有數(shù)據(jù)都傳遞成功了,這是不合理的,由于Subject是一個Observable,那么它就會存在一個unsubscribe的方法,表示它已經(jīng)不管事了,再次調(diào)用其next方法就會報錯,所以可以像下面這樣達(dá)到警示的目的。

import { Subject, interval, take } from "rxjs";
// tick$會間隔?秒鐘吐出數(shù)據(jù),調(diào)?下游subject的next函數(shù)
const tick$ = interval(1000).pipe(take(5));
const subject = new Subject();
tick$.subscribe(subject);
subject.subscribe((value) => console.log("observer: " + value));
// 在1.5秒的時候subject的unsubscribe函數(shù)被調(diào)?,
// 所以,2秒以后的時間,tick$還要調(diào)?subject的
// next就會拋出?個錯誤異常
setTimeout(() => {
 ?subject.unsubscribe();
}, 1500);

=> 多個上游 <=

說明:?理論上可以用一個Subject合并多個Observable的數(shù)據(jù)流,但是這樣做并不合適,原因在于任何一個上游數(shù)據(jù)流的完結(jié)或者出錯信息都可以終結(jié)Subject對象的生命。

import { Subject, interval, take, map } from "rxjs";
// 這兩個數(shù)據(jù)流都是通過interval產(chǎn)?的Cold Observable對象,
// 每隔?秒鐘吐出?個整數(shù),然后利?map轉(zhuǎn)化為間隔?秒鐘吐出
// ?個固定的字符串,利?take只從兩個數(shù)據(jù)流中分別拿兩個數(shù)據(jù)
const tick1$ = interval(1000).pipe(
 ?map(() => "a"),
 ?take(2)
);
const tick2$ = interval(1000).pipe(
 ?map(() => "b"),
 ?take(2)
);
const subject = new Subject();
tick1$.subscribe(subject);
tick2$.subscribe(subject);
subject.subscribe((value) => console.log("observer 1: " + value));
subject.subscribe((value) => console.log("observer 2: " + value));
// tick1$每隔?秒鐘吐出?個a字符串,吐出兩個之后完結(jié), 
// tick2$同樣每隔?秒鐘吐出?個字符串,只不過吐出的是b,
// 同樣是吐出兩個之后完結(jié)。因為subject訂閱了tick1$和tick2$,
// 所以理論上結(jié)果應(yīng)該是下面這八個值,但其實并不是
// observer 1: a
// observer 2: a
// observer 1: b
// observer 2: b
// observer 1: a
// observer 2: a
// observer 1: b
// observer 2: b

理解:?為tick1$是由take產(chǎn)生的,也就是說在吐出2個數(shù)據(jù)之后就會調(diào)用下游的complete函數(shù),也就是調(diào)用subject的complete函數(shù),此時它已經(jīng)完結(jié),后續(xù)的next的方法是沒有效果的,這也是為什么第二個b不會有效果的原因。

=> 錯誤處理 <=

說明:?如果Subject有多個Observer,并且Subject的某個下游數(shù)據(jù)流產(chǎn)生了一個錯誤異常,而且這個錯誤異常沒有被Observer處理,那這個Subject其他的Observer都會失敗,為了避免這種情況的發(fā)生,每有一個Observer的時候,就需要給它一個處理錯誤的地放就可以解決這個問題了。

十、調(diào)度器Scheduler

(1)作用

作用:?用于控制RxJS數(shù)據(jù)流中數(shù)據(jù)消息的推送節(jié)奏

舉例:?這里以帶Scheduler類型的參數(shù)的操作符range為例,不過使用調(diào)度器的這種寫法已經(jīng)廢棄,這里只是舉例而已

// 不使用調(diào)度器
import { range } from "rxjs";
const source$ = range(1, 3);
console.log("before subscribe");
source$.subscribe(
 ?(value) => console.log("data: ", value),
 ?(error) => console.log("error: ", error),
 ?() => console.log("complete")
);
console.log("after subscribe");

解釋:?因為range是同步輸出數(shù)據(jù),所有當(dāng)Observer添加之后,會把所有數(shù)據(jù)全部吐出,所以上面的代碼也是完全同步執(zhí)行的。

// 使用調(diào)度器,寫法已經(jīng)廢棄
import { range, asapScheduler } from "rxjs";
const source$ = range(1, 3, asapScheduler);
console.log("before subscribe");
source$.subscribe(
 ?(value) => console.log("data: ", value),
 ?(error) => console.log("error: ", error),
 ?() => console.log("complete")
);
console.log("after subscribe");

思考:?所以這里的asapScheduler決定了數(shù)據(jù)推送任務(wù)不是同步執(zhí)行,因為range數(shù)據(jù)的吐出是在after subscribe字符串之后的,那么什么是Scheduler呢?

RxJS中定義Scheduler:
它是一種數(shù)據(jù)結(jié)構(gòu) 它是一個執(zhí)行環(huán)境 它有一個虛擬時鐘
解釋:
所謂Scheduer是?種數(shù)據(jù)結(jié)構(gòu),指的是Scheduler對象可以根據(jù)優(yōu)先級或者其他某種條件來安排任務(wù)執(zhí)行隊列 Scheduler可以指定一個任務(wù)何時何地執(zhí)行,所以它是一個執(zhí)行環(huán)境在RxJS的數(shù)據(jù)流世界中,Scheduler說現(xiàn)在是幾點幾分幾秒,那現(xiàn)在就是幾點幾分幾秒,所以Scheduler就像是這個世界中的權(quán)威標(biāo)準(zhǔn)時鐘,正因為Scheduler提供的虛擬時鐘可以被操縱,所以可以利用Scheduler來控制數(shù)據(jù)流中數(shù)據(jù)的流動節(jié)奏。

(2)內(nèi)置的Scheduler

調(diào)度器說明
null默認(rèn)不使用,代表同步執(zhí)行的情況
queueScheduler利用隊列實現(xiàn),用于迭代操作
asapScheduler在當(dāng)前工作之后,下個工作之前執(zhí)行,用于異步轉(zhuǎn)換
asyncScheduler用于基于時間的操作
animationFrameScheduler用于創(chuàng)建流暢的瀏覽器動畫

(3)支持Scheduler的操作符

=> observeOn操作符 <=

作用:?根據(jù)上游的Observable對象產(chǎn)生出一個新的Observable對象出來,讓這個新的Observable對象吐出的數(shù)據(jù)由指定的Scheduler來控制

參數(shù):?observeOn(調(diào)度器)

import { range, observeOn, asapScheduler } from "rxjs";
const source$ = range(1, 3);
const asapSource$ = source$.pipe(observeOn(asapScheduler));
console.log("before subscribe");
// 訂閱新產(chǎn)生的Observable發(fā)現(xiàn)受調(diào)度器的影響
asapSource$.subscribe(
 ?(value) => console.log("data: ", value),
 ?(error) => console.log("error: ", error),
 ?() => console.log("complete")
);
console.log("after subscribe");
import { range, observeOn, asapScheduler } from "rxjs";
const source$ = range(1, 3);
const asapSource$ = source$.pipe(observeOn(asapScheduler));
console.log("before subscribe");
// 訂閱上游數(shù)據(jù)發(fā)現(xiàn)不受調(diào)度器的影響
source$.subscribe(
 ?(value) => console.log("data: ", value),
 ?(error) => console.log("error: ", error),
 ?() => console.log("complete")
);
console.log("after subscribe");

注意:?observeOn只控制新產(chǎn)生的Observable對象的數(shù)據(jù)推送節(jié)奏,并不能改變上游Observable對象所使用的Scheduler

=> subscribeOn操作符 <=

說明:?這個跟observeOn的區(qū)別在于前者是控制什么時候訂閱Observable對象,而后者是控制Observable對象何時往下游推送數(shù)據(jù),使用和參數(shù)是類似的。


該文章在 2024/11/12 11:11:19 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務(wù)都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2024 ClickSun All Rights Reserved

美女性感一二区,天堂久久久久久中文,自拍偷拍亚洲动漫 ,小浪货腿打开水真多视频,国产无套内精在线观看,巨胸喷奶水免费视频,欧美一级粗黑,免费高清欧美一区二区三区,黑人越猛烈欧美XX00动态图,最近亚洲国产网页aⅴ,少妇自拍视频一区,亚洲精品福利视频久久,最新手机国产在线小视频,国产午夜福利无,在线免费观看国产污污污视频,97视频国产中文,在线欧美sm一卡
成 年 人 黄 色 网 站 大 全| 一区二区三区免费电影| 麻豆少妇让水电工爽了一下午| 999精品国产| 夜夜香夜夜摸夜夜添野外| 99国产导航| sm重味十八禁视频免费观看| 亚洲老伊人| 伊人久久大香线蕉动态视频| 欧洲在线视频免费视频| ww免费视频| 国产一区二区久久久| 69堂午夜福利| 国产免费性爱视频网站| 丰满大屁股熟女啪播放| 97se亚洲综合在线| 天堂一区二区三区网址| 好粗好硬好大在线观看视频 | 日本国产午夜福利片在线观看| 亚洲字字幕在线中文乱码| 色窝窝亚洲AⅤ网| jizz国产免费观看| 日本a级理论片免费看| 制服丝袜第一页国产| 日韩AV孕妇在线观看| a v 天堂手机在线观看| 国产巨胸乳在线播| 性夜影院午夜寂寞影院春药| 粗大猛烈进出身体高潮视频| 少妇太爽了手机在线观看| 伊人刺激在线蕉| 少妇的丰满3中文字幕| 日本男男喷水视频在线观看| 午夜性视频网站色多多| 午夜v免费区| 亚洲中国最大AV网站| 啊啊啊我想要天堂| 亚洲高清在线每日更新| 美女扒开双腿露出尿口无内裤图片 | 最新在线精品国自产拍福利| DY888午夜国产精品| 香蕉高清永久在线视频| 国产自愉自愉免费精品七区| 又污又黄的视频无遮挡免费| 国产亚洲成AV人在线观看| 国产激情A∨在线视频播放| 国产最新白丝免费视频网址| xxxxx大片免费看| 狠狠频道一区二区三区| 又大又爽视频| 校花高潮抽搐冒白浆| 黑人巨大亚洲综合在线| 9999永久免费精品视频| 欧美人妖精品| 大胸美女又黄又w免费网站| 嗯~啊~哦~别~别停~啊视频| 全球熟女AⅤ导航| 国产美女粉嫩无套在线观看| 亚洲AV男人的天堂网址在线观看| 国产的花视频在线观看免费| 绝色A级视频| 杨幂Av一区二区三区| 国产日韩男女激情视频免费播放| 天堂网在线最新版www中文网| 亚洲1024| 久久本道久久综合伊人| 嗯~啊~哦~别~别停~啊黑人| 亚洲愉拍熟女另类| 国产精品视频白浆免费网站| 国语对白熟女进去了| 国产呦交精品免费视频| 久久综合日韩,金| 精品国产免费一区二区三区| 苍井空一区二区三区在线观看| 又黄又骚视频免费观看 | 强美女的免费视频网站| 国产……在线| 日本高清一区免费中文视频| 自拍自偷第三页| 思思色免费视频| 喷白浆在线观看| 久久综合九色综合久桃花网| 国产视热频国只有精品| 久久夜色精品国产网站| 精品一区二区三区自拍图片区 | 久久天堂AV综合合色| 精品尤物视频在线观看999| 国产精品亚洲а∨天堂免| 国产精品自在拍在线播放| 好爽好硬视频激情四射啊啊啊啊| 女教师巨大乳孔中文字幕| 国少妇xxxx00| 在线看片人成视频免费无遮挡| 国产在线拍揄自揄视频网站 | AA级女人大片喷水免费播放| 精品动漫福利h视频在线观看| 日本一在线中文字幕DVD| 久久久精品张柏芝| 日本XXXX完全色| 极品丝袜美女高潮流白浆| 国产主播高潮在线播| 亚洲AⅤ国产AV综合Av| 久久精品极品盛宴免视| 精品久久久久久国产张柏芝| zooskvideos性欧美lara| 99久久全裸视频| 9禁无羞遮美女真人免费网站| 国产饥渴熟女| 90后极品粉嫩小泬20p| 老色鬼永久精品网站| 欧美性a欧美在线| 伊人少妇久久网| 亚洲骚妇视频| 不要粗硬别进去视频| 很很鲁很很在线视频| 午夜福利深夜XX00视频无卡顿| 又又又爽又黄的美女网站| 在线观看视频亚洲一国产踩踏视频免费 | 少妇高清一区二区免费看| 91青青视频| 在线播放日本片在线看的免费网站| 377p欧洲日本亚洲大胆| 久热首页国产在线| 波多野结衣手机免费AV在线| 亚洲视频在线观看免费| 中国小younv女younv网站| 92午夜福利视频动态图| 高清国语自产拍免费| 日本特大a级猛片在线观看| 亚洲嫩模综合| 9999国产精品欧美久久久久久| 国产日韩午夜视频一级| 成年片色大黄全免费网无需安装| 暴力调教一区二区三区| 亚洲影院在线| 不卡在线观看免费AV| 算你色永久免费播放视频下载| 翁公在厨房猛烈的撞击| 中文字幕在线观看第2页| 2017AV天堂网在线播放| 阳茎伸入女人的免费视频| 黑人欧美又大的又粗| 进去粗粗硬硬紧紧的好爽在线视频| 老司机在线精品视频网站| 亚洲人妖系列在线播放| 出差被夫の上司持久侵犯在线观看| 一吸一夹都是练出来的吗| 男人扎爽进女人j网站免费| 亚洲色一色鲁一鲁鲁| 日日夜夜都高潮| 99re视频热这里只有精品38| 国产女主播一二三区| 国产精品 天干天干| 放荡少妇一区| 屁屁草草影院ccyycom| 337日本中文有码| 加勒比一区| 97一区二区在线精品视频| 一本大道高清视频中文字幕| 尤物影音先锋在线观看| 亚洲成年a在线观看| xxxx国产| 美女好全身无遮掩免费网战| 在线观看2021中文字幕| 不卡的AV免费在线| 东北妇女精品BBW BBW| 国精品产露脸偷拍视频1024| 久久大蕉香蕉免费| 国产,欧美性爱| 91九色熟女| 白浆在线播放| 日韩AB播放三区| h片免费在线播放| 国产美女被遭强高潮无套| 看全色黄大色黄大片爽一次| 日日干夜夜嗷嗷叫视频| 人人玩人人添人人澡mp4| 亚洲理伦在线观看| 黄 色 成 年 人 网 站免费| 久久亚洲综合精品99国产| 国内自拍日韩| 成年女人永久在线看| 国产精品农村妇女性生活H片在线| 国产激情视频一区| 小寡妇一夜要了六次| 2022亚洲国产美女视频免费网站| 一区二区女优| 很污的美女网站无遮挡| 你懂的视频网站| 亚洲中文字字幕AV影院| 国产污视频网站在线观看| 78色国产精品| 亚洲嗯啊| 熟女老女人的网站| 2021影音先锋aⅴ资源男人网| 欧美粗大猛烈进出| 久久女女热精品视频| 夜色国产精品一区| 一道本免费高清中字幕1V1| 888米奇四色狠狠下| 与丰满少妇做爽视频| 国产萌白酱福利喷水视频在线观看 | 无遮挡又爽又刺激的免费观看| 国产精品免费午夜在线a| 最新国产亚洲韩国日本美女| 96国产XXXX免费视频| 亚洲第一红杏| 又大又湿又紧 视频| 美女被c到高潮高H视频| 欧美日韩精品一区二区在线视频| 加勒比无 码中字幕| 亚洲中文日本久久高清| 又大又粗粉嫩18p少妇| 国产丰满成熟女性性满足视频| 国产乱子伦| 99丝袜脚交网站a| 嫩草未满十八在线观看| 亚洲中文字幕永久在线不卡| 性AⅤ免费视频| 午夜 色 网站| 在线观看亚洲AV日韩AV| 粗大猛烈进出高潮视频试看| 一个人免费观看视频www| 另类亚洲其他中文另类| 国产一区视频一区欧美| 嗯…啊…嗯在线网站| 精品动漫久久久网站| 国产美女视频全黄扒开| 午夜y视频| 杨幂一区二区在线观看| AV影视永久在线| 最新午夜理片中文字幕| 日本少妇寂寞少妇aaa| 99RE6热视频这里只精品首页| 不卡AV电影在线| 狠狠操理论| 在线人成免费观看网站| 极品美女Aⅴ在线观看| 92午夜福利国产精品| 在线日本高清日本免费| 亚洲性综合在线视频| 国产AV性爱| 我和子发生了性关系视频| 韩国19禁A片在线播放免费 | 好大好硬好深好爽想要免费视频 | 国产精品久久1024| 久久久综合九色综合鬼色| 男人j桶进女人p无遮挡动态图| 久久99国产精品二区抖音| 亚洲VA男同久久| 亚洲三级免费电影| 一级特黄aa大片爽爽影院免费| 国产日韩午夜视频一级| 国产JJzzJJzz全部免费观看| 尤物网址禁18| 综合激情久久综合激情| 性XXXX欧美老妇胖老太肥肥图片| 色窝窝人体色www| 久久久亚洲日韩| 色婷婷综合缴情综免费观看| 国产打屁股在线播放91| 亚洲欧美日韩国产二区| 91麻豆国产高清产精品第一页| 韩国三级一区二区| 关晓彤高潮18以下禁止观看| 亚洲a视频欧美| 美女隐私无遮挡免费视频网站| 亚洲无碼在线观看手机| 国产chinasex| 老汉A影院| 尤物在线观看不卡| 国产乱子伦免费精品亚洲产在线 | 两女互慰高潮视频免费| 亚洲第一网站男人都懂2021| 性色aⅴ在线播放| 很黄很爽的免费视频大全| 欧美人与禽zozo性伦交| 国产精品亚洲А∨天堂免| 国产又黄又大又粗视频| 亚洲欧美人成网站在线观看看| 在线播放第一页国产精品| 国产无套粉嫩在线观看| 亚洲精品无播放器在线播放| 高清偷自拍第1页| 中文字幕欧美123| 2022国产高清视频网| 亚洲成男香蕉在线观看| 自拍另类综合欧美小说| 亚洲制服丝袜一区二区三区| 伊人五月天在线| 一级国产AV影视直播| 亚洲色大成网站www看下面| 久久与欧美视频| 欧美午夜福利视频| 国产一级午夜免费观在线| 久久久国产精品萌白酱免费| 只精品99re66| 欧美性天天影视| 扒开校花的粉嫩小泬在线观看| 夜夜添夜夜添夜夜摸夜夜摸 | 肉到失禁高H视频免费播放| 在线观看亚洲女教师| 大学生久久香蕉国产线看观看| 欧美性爱免费国产在线观看| 好大好硬我要喷水了免费视频| 自在自线亚洲а∨天堂在线| 特级一级理论片免费看| 2021午夜福利理论片| 16女下面流水不遮图免费观看女人小便的视频 | 最刺激的乱惀小说喷水短篇| 中国一级特黄大片| 亚洲熟女激情图| 亚洲国产精品久久久久久| 中高生啊Av免费在线播放| 国产污污污影院在线观看免费| 国产精品美女被遭强扒双腿| 校花高潮一区日韩| 娇妻被强行打开双腿灌满白浆| 99热线精品大全在线观看| 一区二区三区干炮| 久久久一本美女| 未成满十八免费网站禁止AV| 亚洲色国产欧美日韩| 五月婷婷操大逼| 国产精品精品自产| 99r8这是只有精品视频20| 天干天天在线视频| 在线亚洲欧美日韩精品专区 | 亚洲欧美闷骚少妇影院| h高潮娇喘抽搐喷水免费视频| igao国产精品| 久久成人影院精品777| 99re8这里有精品热视| 亚洲高清HD综合| 国产在线制服丝袜播放| 春色 都市 亚洲 小说区 | 亚洲欧美日韩综合一区二区| 亚洲国产一区二区三区在线观看| 免费视频久久久久| 荫蒂添的好舒服视频| 2020最新最全的国产精品| 真人高潮娇喘嗯啊在线观看| 久久曰综合| 在线视频提供日本高清视频在线一本视频| 一本大道手机在线看| yw1135尤物在线看| 久久网更衣室偷窥国产| 大吊色色狼人| 国产美女流白浆| 色多多Av网站| AV特黄| Chinese白袜Gay男男国产| 国产精品自在在线午夜精华在线 | 白浆视频在线观看| 国产A久久精品| 互换享受高潮| 日韩AV一区二区精品不卡| 夜夜操护士视频| 真人XO无遮挡gif动态图图| YY6080午夜免费福利理论影视| 免费乱理伦片在线观看2017| 国产真实交换在线| bestialityvideo另类骆驼| 国产丰满大波大屁股熟女| 亚洲四区国产精品推荐| 婷婷激情精品| 国产欧美日韩伦中文| 国内精品自线一二三区2021野狼| 99热这里只有乱| 午夜激情福利视频网| 欧美日韩精品一区二区三区高清视频| 国产偷闻女邻居内裤在线看| 波多野结衣手机在线aⅤ| 农村大集偷窥厕所视频在线| 96在线看片免费视频国产| 激情综合婷婷激情五月| 亚洲中亚洲中文字幕无线| 国产AV女人的天堂| 窝窝人体色www| 2022AV网站免费观看| 色老头在线观看91| AV美女免费在线| 久久精品这里只有精99品麻豆| 亚洲成AV人影院在线观看网| 亚洲精品福利| 好深好爽使劲我还要视频| 国产vr精品专区| 最近更新中文字幕2019视频 | 亚洲a∨男人免费视频| AV在线深夜福利浏览器| 女人体免费一区二区| 国产精品自在在线午夜免费| 亚洲精品456在线观看| va不卡一区二区三区得| 久久aⅴ不卡网站| 一本之道中文日本高| 色多多WWW视频在线观看| 中文专区欧美三级在线| 九九热线这里只有精品视频| chinese国产在线观看| 制服丝袜美腿一区二区| 婷婷开心色四房播播| 毛茸茸性xxxx毛茸茸毛茸茸| AV在线制服丝袜免费观看| 国产偷伦视频在线| 最新呦女视频网站| XXXXBBB日本少妇| 亚洲老肥熟女四五十路| 99久久国产综合精品尤物| 久久无碼专区国产精品| 激情综合色婷婷丁香| 性色aⅴ在线观看免费| 2021中文字字幕永久在线| 久久影音先锋每日资源网站| 亚洲天堂洲激情片| 又粗又硬一区二区三区| 日韩成AV人片在线观看| 3D欧美真人性动漫在线| 久久香蕉性爱视频| 日本高清国产性爱欧美| 亚洲男男在线播放| 亚洲精品一二区| 新日本中文字幕在线观看| 污污污的小说高潮在线观看| 伊人色强在线网| 欧美人成在线观看免费| 亚洲成年女人AⅤ| 国产激情在线观看免费视频| 性色开放主播在线直播| 国产女人高潮叫床免费视频| 天天做天天拍天天爽| 久久精品免费一区二区三区| 狠狠做五月深深爱婷婷| 国产免费一级特黄AA片| 色777狠狠狠缘综合| 不卡视频无一区二区免费| 日本涩爱综合网| 精品国产亚洲一区二区三区| 久久88女同性午夜福利| 老司机电影院在线观看高H| 久久久免费白丝精品| 91精选在线国产| 青青爽在线视频精品| 亚洲日本一区二区三区| 亚洲无线一二三四区男男| 午夜性动态啪影院| 99国精品午夜福利视频不卡| 国产AV性爱| 日鲁夜鲁狠狠鲁| 波多野结衣二三区| 短裙娇喘在线观看| 波多野结衣被操视频| 五月天丁香在线网站| 呦女视频精品八区| 大战兰州熟女邻居| 最新亚洲人成网站在线影院| 3d动漫精品专区在线观看| K8福利精品第一导航| jizzyou中国少妇| 国产亚洲小视频线播放| 国产剧情21p| 最近中文字幕页| 精品福利久久久| ww亚洲ww在线观看| 这里是综合视频的欧美bbw性色大片| 把JK制服美女高潮视频| 高黄高潮AV免费观看| AV在观线观看男人的天堂| 都市激情 在线 亚洲 国产| 亚洲乱色五月丁香| 888色狠狠| 欧美两性顶级浮力影院| 中文字幕在线岳| 999视频有精品视频在线| 国产高清AV首播原创麻豆| 国产交换配乱婬视频a免费| 18成禁人看免费无遮挡床震| 亚洲第一网站男人都懂2021| 色喔喔视频在线观看| 黑人巨大精品欧洲一区二区 | 波多野结衣系列一区二区三区| 久久久综合结合狠狠狠97色| 很黄,很污的殴美视频| 57pao国产成视频久久免费| 精品午夜在线一区二区三区| 夫目前犯若妻波多野结衣在线播放| 二级人成电影免费| 午夜在线不卡精品国产| 视频一区二区 风间由美| 亚洲就去吻婷婷| 久久综合久久综合九色| xxxxxbbbbb非洲黑人| 国产嗯啊在线观看| 日韩A无V码在线播放| 欧美人体一区二区三区视频| 免费观看很黄很色裸乳视频网站| 无遮无档爽爽免费视频| 成年女人黄小视频| 久草综合 欧美 亚洲| 波多野结衣尤物进入网址| 一本久道久久综合五月丁香 | 国内精品久久久亚洲| 伊人久久大香线蕉午夜| 国内精品伊人久久大香线焦| 在线观看免费大黄美女片| 少妇太爽了在线观看视频| 天堂在线www| 欧美XX片| 亚洲中文字幕va福利| 色综合另类小说图片区| 天天做天天拍天天夜| 国产片午夜福利| 国际精品香蕉在线观看| a级国产乱理伦片在线播放| 五月综合婷婷麻豆| 成年黄页网站免费大全| 男人戳女人戳到爽视频| 性色AⅤ在线播放| 尤物午夜在线| 午夜女上男下XX00XX00动态| 草莓视频国产片在线观看| 岛国免费Aⅴ在线观看| 久久人人爽人人爽人人片aV观看 | 夜夜澡天天碰人人爱AV| 福利私拍在线| 美女丝袜在线播放一区| 精品女同在线观看| 久久亚洲精品视频| 性色AⅤ在线观看| 中日欧美韩国在线观看| 亚洲狠鲁鲁狼| 色悠久久久久综合网伊人男男| 下面视频,丁香婷婷激| 四川美女白浆在线| 亚洲喷潮| 男人J进女人屁爆水网站免费| 中文字幕乱码高清免费网站| 国产拍偷精品网站| 国产精品女主播主要| 亚洲红杏日韩综合AV在线播放| 亚洲色大网WWW永久| 亚洲A√| 寡妇天天做天天爱| 免费观看美女被靠网站| 狠狠爱亚洲综合久久| 亚洲性69影视| 久久狼人香蕉网美国c片| 精品国产永久| 又色又爽视频网站| 在线白丝制服模特视频| 国产一级aA片免费| www一区二区三区| 日本亚洲色大成网站.www| 野花韩国视频在线观看免费播放大香区| 亚洲色大成网坫www| 巨胸流奶水观看视频在线| 在线观看最新中文字幕网址| 亚洲图亚洲色成人综合网| 国产有码免费视频| 厕所日批少妇视频在线观看| 亚洲精品一二三区-久久| 亚洲香蕉网综合| 狠狠操视频观看| 亚洲人成网站77777亚洲| 国产按摩会私密保健 spa 精品| 99午夜福利| 国产人成免费视频不卡码| 日本视频一区二区三区h| 久久九九刘涛精品视频| 国产女精品视频网站免费蜜芽| 黄页网站免费高清在线观看| 国产真实交换免视频| 国产激情久久| 老熟女洗澡maturepom| 在线观看AV水多多| 日韩中文字幕AV| 污污污厕所白慰喷水网站| 丁香六月色| japanesexxxxhd护士18| 2022最新自拍视频在线观看| www久久十八禁| 二级人成电影免费| 国产美女久久片| 真人床震高潮全部视频免费| 久久加勒比| 日韩国产乱子伦视频| 香蕉久久精| 欧美性xxxx狂欢老少配| 中文字幕激情高清一区| 华人在线亚洲欧美精品| 丰满少妇被猛烈进入动漫| 爆操老肥熟在线播放| 国产2022精品黑丝h在线免费观看| 久久久一本精品99久久精品88| 国产精品美腿丝袜第一页| 手机日本不卡一区免费更新| 好大好爽好猛我要喷水了| 国产精品久久久久影院亚瑟| 国产午夜亚洲精品不卡在线观看| 天啪夜夜夜爽天天| 清纯校花的高潮| 白嫩国产在线观看| 亚洲人成电影网站图片| 办公室高潮大乳在线视频| 粉嫩虎白扒开视频| 亚州网www站| 国产精品美女黄| 一级e片在线观看| 97精品免费公开在线视频| AV女人天堂| 国产又大又长又粗视频| 国产技师在线视频| 18ppp禁止欧美视频| 麻豆婷婷综合| 久久少妇野战| 91午夜免费观看| 美女一区二区三区| 先锋影音资源站男人天堂AV| 月夜影视直播在线观看| 国产在线视频大学生白嫩| 特级欧美AAAAAAA免费观看| 国产精品30p| 69堂国内精品片| 亚洲精品欧美国产台湾swag| 好深免费国产大片在线观看| 高清国产在线拍揄自揄视频| 嗯啊不要欧美日韩| 3344福利视频| 天堂网在线最新视频网站| 97久久精品视频| 亚洲天2021地址免费观看| 高清三级理轮影院久久伊人网站| 国产免费人成视频在线观看播放| 久章草精品视频免费观看| 在线观看4455亚洲网址| 无遮挡粉嫩小泬久久久久| 无遮挡免费高清羞羞视频| 亚洲自偷自拍另类图片二区| 粉嫩虎白扒开视频| 激情五月亚洲综合图区| 国产又黄又爽又刺激的视频| 久久香蕉性爱视频| 被窝影院午夜看片爽爽软件| 色妞ww精品视频7777| 午夜久久久久| 精品国产欧美一区二区| 成人午夜看黄在线尤物成人| 国产女与黑人在线精品| 中国屁股喷水视频| 青青草原不卡免费在线观看| 国产精品www| 国产精品免费AⅤ片| 久久精致一级爱片日产| www.999精品视频| 综合AV第1页| jiZZJIZZ日本护士视频色系| 亚洲香蕉无线免| 欧美精品少妇videofree720| 欧美日韩国产视频二区| 百合AV一区二区| 久久精品五福影院| 韩国AV免费观看完整版动漫| 阿v天堂在线观看| 网站你懂在线| 步兵一区二区三区在线观看| 337p日本欧洲亚洲大胆久久| 成人亚洲爱情岛论坛在线观看| 国产福利小电影| 中文字幕不卡乱偷在线观看| 久久成年人视频| 性色国产网站| 风间性色中文字幕亚洲一区| 成年人电影网成年人片| 国产精品久久齐齐| 国产精品大屁股视频| 国产精品videossex国产高清| 国产老肥熟xxxx| 91精品尤物| 亚洲精品62p| 7777欧美成是人在线观看| 老司机国内精品久久久久精品| AV剧情麻豆映画国产在线观看| 婷婷色香五月综合缴缴情香蕉| 肏屄日出白浆视频| 经典国产乱子伦精品视频 | 2020精品精品国产500部| 欧美18XXOO视频在线| 色屁屁www视频免费观看| 亚洲人成电影网站色MP4| 国产精品第20页在线观看| 一区二区精品视频日本| 老司机导航亚洲精品导航| 亚洲色在线观看综合| 又硬又爽又长又大的曰皮视频| 国产精品福利片免费看| 久久国产热这里只有精品| 中国JaPanese高潮尖叫欢迎你| 国产特黄AV| 日本福利导航视频| 又湿又紧又大A视频| 国产一区二区三区尤物| 久久久久液| 午夜性刺激在线看免费Y| 国产一级高清| 亚洲国产欧美在线成人AAAA| 午夜好爽好舒服免费视频| 亚洲一区综合图区精品| 五十路熟女一区二区三区| 成八AV网站| 亚洲中美观看在线| 又硬又爽又长又大的曰皮视频| 笫九色区aⅴ天堂| 最近更新在线日韩| 亚洲狠狠动漫| 韩国一卡二卡三卡四卡网站| 婷婷桃花五月丁香| 黑欧美又粗又大又| 久久久综合九色综合中文网| 99PAO在线视频国产| 鲁丝欧美一二三四区| AV人摸人人人澡人人超清下载| 91精品国产福利在线观看你| 玩成熟老熟女视频| 中文字幕AV不卡手在线观看| 户外裸露刺激视频第一区听| 久久亚洲制服视频| 日韩AV影院在线啊啊啊| 足 交 视屏在线观看| 香港精品在线播放| 亚洲 蜜臀 一区二区三区| 张柏芝2008久久| 老色鬼精品一区二区| 一区欧美在线动漫| 中文字幕有码视频| 欧洲在线视频免费视频| 强行挺进朋友漂亮的娇妻| 国产精品亚洲综合色区| 国产乱色在线观看| 亚洲色在线播放| 国产亚洲精品俞拍是免费97| 2022国产视频中文字幕| 啊…轻点太深了国产在线观看| 亚洲AV第一成肉网| 97视频视频在线观看视频| 又黄又猛又爽又痛免费视频| 午夜美女免费福利视频| 大学生久久香蕉国产线观看| 99国精品午夜福利视频不卡| 国产精品久久久久精品综合| 4个闺蜜疯狂互换 5P同床好爽| 国产制服丝袜在线第一页 | 亚洲免费福利在线视频| 色婷婷综合在线观看| 东热激情Av在綫| 妇乱子伦激情| 在线观看人成影院| 久久综合精品国产丝袜长腿| 高清国产羞羞视频| 国产高清在线精品一本大道| 洲国内精品自在线影院| 少妇被粗大的猛进出| 久久情侣综合| xxxxx在线ai| 国产另类综合第一| 亚洲欧美日韩高清专区在线| 国产精品麻豆A在线播放| 欧美三級片黃色三級片黃色宀| 久久2020精品免费视频| 亚洲中文日本久久高清| 第一页美女在线观看| yy111111电影院免费少妇影院| 男女肉粗暴进来120秒动态图| 日本成a人片在线播放| 又色又爽又黄的视频在线观看| 激情综合色婷婷激情丁香| 好深好痛好猛好爽视频| 一女战三老外一女战三黑人 | 色福利视频导航| 变态另类国产精品一区| 淫妇AV在线| 狂野欧美精品| 成年视频天天影视在线| 日本免费一区二区三区不卡在线观看| 巨茎大战俄罗斯金发尤物| 国产第一页院浮力地址| 丁香五月激情中文字幕专区| 天堂网AV在线线| 亚洲专区 AV 第1页 在线| 在线 你懂的| 永久手机在线免费| 6080久久影视精品| 91极品盛宴在线| aⅴ人体在线看| 我和亲妺作爱在线视频| 国产直播蜜芽aV| 国产小屁孩cao大人的视频| 另类鲁丝片在线观看| 一级国产免费观看| 最新在线你懂的| 亚州精品日韩久久| 9l国产精品久久久久尤物| 亚洲精选品质AV在线| 95偷拍午夜Tv视频| 午夜理论片在线观看免费| 越南女人下面毛茸茸| 国产99视频精品免费视频6| 色多多www视频在线观看免费| 十八禁网站gay| 伊人久久久久久香港久久久久香港久| 中文乱码免费一区二区三区 | 又色又爽又黄的三级视频| 国产中文一区二区苍井空| 啊啊啊嗯啊午夜影院| 9re久精品视频在线观看| 国色天香直播在线观看| 激情午夜福利| 性爱网址永久免费| 影音先锋久久资源网AV资源站| 国产最大精品免费AV电影网站| 亚洲无遮挡| 九九热爱精品视频高速| 尤物久久国产免费观看| 日韩欧美高清视频在线一区二区三区| 国产精品午夜福利不卡| 你懂得在线播放| 国产激情AV小说| 亚洲露露在线观看| 国产精品自在自线视频| 国产AV综合AV一区二区三区| 东北老女人高潮粗暴对白| 又粗又长又大又色的免费网站| 欧美v一区二区三区| 青青久久少妇| 亚洲AV中文字字幕乱| 2022AV在线视频网站| 少妇高潮太爽了在线播放| 又爽又黄无遮挡的动态图| 亚洲手机在线视频| 一级a爱大片免费视频| 中文字幕婷婷日韩欧美亚洲| 亚洲欧美丝袜 动漫专区| 少妇特黄A片一区二区三区| 亚洲一区二区三区香蕉| 97在线免费操穴视频观看| 99爱网站在线观看| 午夜性刺激免费看视频在线| mm131,免费视频| 国产精品网曝门事件在线观看| 成年午夜精品久久久精品| 2020年亚洲天堂网| 国产尤物在线点击进入| 国产无套乱子伦精彩是白视频| 国产女人叫床高潮视频在线观看| 日本XXXX完全色| 狼人久久中文字幕综合| 欧美国产精品三级| 成 人 色综合 综合网站| h视频在线观看免费视频网| 曰曰摸天天摸人人看久久| 国产灌醉视频免费观看| 成年动漫在线网站免费| 日韩欧美中出| 亚洲午夜不卡| 久章草在线视频免费观看| 偷拍亚洲网| 亚洲AV女电影网| 亚洲曰韩欧美综合色另类小说 | 伊人久久大线影院首页| 91在线看喷水| 激情18网站| 九九99精品视频| 成a人v免费视频| 苍井空二区| 伊人 男人的天堂| 欧美freesex黑人又粗又大!| 亚洲日韩sm首页一区| 家庭乱码区中文字幕| 亚洲一区二区尤物| 在线黄页国产视频| 国产啪精品视频网站免| 伊人久久免费综合视频| 亚洲 欧美 综合 在线 精品| AV水多多在线观看| 国产在线孕妇孕交 | AV免费不卡国产在线观看| 久9re热视频这里只有精品下载| 一级A片特爽高潮视频在线观看| 香蕉在线网站| 色蝌蚪欧美| AV天堂色| 少妇湿影院| 最近最新中文字幕视频| 无罩看奶禁18| 精品一区二区三区视频| 久久久久久久久精品中文字幕| 久久精品99久久香蕉国产| 午夜蜜芽尤物视频在线看| 尤物AV永久免费观看| 国产精品性事| 爽爽婬人综合网| 激情综合婷婷激情五月| 污黄尿尿视频在线观看网站| 精品一区二区三区视频| mm1313国产精品久久| 亚洲www永久网站| 十八岁以后免费观看的黄| 极品爽极品色极品影院| 尾随入室强奷在线播放| 国产精品麻豆A在线播放| 97se亚洲国产综合自在线抹茶| 激情综合色五月丁香六月亚洲迅雷下载| 免费人成小说在线观看网站| 国产美腿丝袜视频在线观看| 91露脸极品magnet在线播放| 国产私拍一区二区三区| 久热re这里精品视频在线6| 久久 午夜福利 张柏芝| 亚洲欧美日韩中文无线码| 国产综合久久久久| 久久99热只有频精品免费| 开心五月综合激情综合五月| 亚洲A∨在线| 免费黑丝国产网站| 老司机午夜福利视频免费播放| 印度幻女bbwxxxx在线播放| 国产精品美女久久久久| 尤物在线视频yw193国产| 最新影片日本巨波霸乳影院| 公交偷窥福利视频| 视频二区素人欧美制服| 国产福利小电影| 欧洲婬荡少妇一级视频| 国产H肉在线视频免费观看| 杨幂被弄喷水视频在线观看处女| 大干网免费视频| ass日 韩pics| 亚洲欧美综合在线777米奇| 成年日韩片AV在线网站医生| 啊啊啊不要视频亚洲天堂| 在线观看A∨网站| 张开腿无遮无挡在线观看| 国产蜜芽尤物网站免费| mm1313午夜福利| 最新欧美69堂在线视频| 性刺激视频免费观看| 青草青草久热精品视频国产4 | 又黄又免费的网站| bbw厕所白嫩bbw| 波多野结衣狠狠| aⅴ人体在线看| 成年男女人免费看片播放| 我偷偷跟亲妺作爱h视频免费| 国产精品不卡永久免费| 中文字幕AV二区| 风韵犹存的美妇如狼似虎| 99热成人精品热久久| asian极品呦女xx农村| 亚洲欧美日韩一区二区在线观看| 正在播放按摩中出| 色8天天狠天天透天干天天怕| 青青久久Av北条麻妃| 波多野结衣琪琪网| 久久这里有精品15一区二区三区| 久久只有这精品99正在播放| 国产又粗又爽的视频| 中文字幕国产在线| 在线观看午夜福利院视频| 国产91在线一区二区三区| 亚州熟女俱乐部| 多毛亚洲女毛茸小便| 亚洲日韩中文字幕在线不卡最新| 琪琪777午夜理论片在线观看播放| 范冰冰欧美日韩中字| 亚洲小少妇| 97人人视频波多野结衣蜜月| H福利在线观看| 日日天干夜夜人人添| 欧美亚洲喷水视频在线观看| 尤物影音先锋在线观看 | 综色久久99| 美女扒开下面流白浆在线试听| 欧美a级毛欧美1级a大片| 国产大全国内精品专区第一页| 亚洲一区二区精品观看| 亚洲精品456| AV麻豆男人的天堂在线观看| 大学生无套系列合集视频| 少妇大p| 在线观看免人成视频网站| 高中粉嫩视频福利在线| 久久久久久久岛国免费观看| 久久线精品视频| 尹人大香蕉综合视频| 国产乱子伦| 国产在线第一区二区三区| 小说区图片区综合区| 欧美亚洲春色校园小说图片区| 亚洲日本不卡不码一区二区| 欲求不满的按摩中文字幕| 国产女人AV免费看| 在线观看ā片免费免播放器| 在线亚洲人成电影网站色www| 极品少妇福利视频| 亚洲第一页欧美在线播放| 久久夜中文字幕1页| 国产米奇888在线视频| 日韩亚洲国产综合αv高清| 亚洲AV专区一专区二专区三| 伊人狠色综合网| 扒开腿狂躁女人免费视频图| 亚洲国产精品拍青青草原| 最好看的日本中文字幕2019| 久久亚洲色www成人| 欧美女同视频网站在线观看| 制服丝袜美腿Av一级网站| 一卡二卡三卡视频| 又爽又黄又无遮挡的激情视频在线观看| 国产在线aⅴ精品人妖| 屁股又白又大肥熟女人视频| 五十路综合网| 大香伊蕉最新视频| 国产亚洲精品A在线观看下载| 久欠精品国国产99国产精2021| 亚洲欧洲日本中文A∨| 尹人香蕉99视频| JIZZ国产免费观看黄级AV片| 最新日韩AV电影久久网| 又爽又黄又屋遮挡的视频| 亚洲第一视角不卡高清在线| 日韩国产18年亚洲| 丁香婷图一区二区三区| 国产精品17p| 亚洲精品福利视频| 国产小屁孩cao大人在线播放| 国产精品VA在线观看H| 夜夜爽88888免费视频| 2021日产乱码网站| bl国产免费一区二区三区bl | 2022在线免费观看黄v| 国产女人喷潮视频免费 | 国产原创精品巨作无遮挡| 久热香蕉在线视频免费版| 92免费午夜福利1000合集| 6080yyy午夜理论片久久| 国产美女pp喷水视频| 免费人成视频x8x8入口免费| 国产XXXX农村野外性XXXX| 日本护士毛茸茸的高潮| 小说区图片区欧美日韩电影| 嗯啊哦视频在线观看网站| 亚洲综合另类小说色区一| 极品JK美女被草视频| 九九久久五月天精品| 中文字幕与邻居少妇性刺激| 亚洲成a人片在线中文| 欧洲乱码伦视频免费| 狼人色国产在线视频麻豆| 先锋天堂亚洲、韩日国产丝袜| 尤物网 五月天| 妺妺窝人体色WWW在线小说| 丝袜国产激情视频| 尹人大香蕉综合视频| 禁18视频免费99视频| 色婷婷激情综合| 欧美xx精品| 亚洲精品p12| 九九影院尤物视频| 亚洲日本一区二区三区| 黑人巨茎美女高潮视频| 国产午夜福利不卡麻豆| 国产久爱视频| 国产原创巨作在线| 菠萝久久夜| 十八禁污网站在线观看国产| 亚洲美女美妇久久字幕组| 青草午夜福利视频| 成?人?网?站不卡在线| 国产精鲁鲁网在线视频| 成年人视频一区二区| 99爱视频99爱在线观看免费| 中文欧美亚洲欧日韩范冰冰| 自拍 亚洲 欧美 另类 动漫| 久久99精品久久久久久蜜芽| 东北不带套对白| 丰满毛多小少妇12P| 伊人婷婷在线视频| 中文字幕久久精品一区二区三区| 国产小u女在线未发育网站| 影音先锋色天天| 天天爽夜夜爽夜夜爽精品视频| 国产一区二区三区精品视频| 色妞影院在线观看品爱网| 中文字幕人成乱码中国| 免费观看美女高潮视频| 在线精品视频raPPer| 亚洲理论国产| 综合五月激情二区视频| yy111111家庭女教师光屁股| 91尤物午夜网站在线播放| jk白丝喷水| 亚洲aⅴ元码一区二区三区| 精品视频国产香人视频| 一级丰满少妇按摩| 在线欧美96…| 欧美色宅男午夜电影网站| 2020亚洲最新中文字幕乱码不卡| 成 人 黄 色 激 情视频网站亚洲七七| 性欧美丰满巨大| 色AV天堂国| 综合激情五月综合激情五月激情1| 国产精品亚洲哟女| 精品久久AV| 海量AV不卡高清| 综合伊人久久在一二三区| 好爽好紧好大的免费视频国产| 少妇水多多午夜福利| 伊人久久大香线蕉AⅤ色| 欧美日韩x8x8视频| 亚洲精品第一国产综合精品99| 精品熟女少妇久久免费| 2020亚洲А∨天堂在线直播| 2020国内精品自在自线| 国产AV-肉欲| 天堂免费一区二区三区| 野外露出视频一区| 杨幂性XXXXHD国产| 国产私拍一区二区三区| 国产大伊人久久孕妇| 亚欧同人精品天堂| 亚洲天堂网最新| 91普通话国产对白在线| 亚洲超清精品AV在线| 伊大人香蕉在线观看精彩完整视频| 2020精品国产午夜福利观看| 嗯太粗太深了h视频免费| 18女下面流水无遮盖视频| 日本高清久久亚洲| 国产精品第29页| 1313国产午夜精品理论片| 中国china体内裑精亚洲日本| 亚洲伊人久久大香线蕉| xxxxx性开放| 国产美女制服丝袜在线| 成人精品视频99在线观看免费| 成l人在线观看线路1| 三上悠亚绝顶を教え込ま| 好吊妞国产欧美日韩观看| 久热亚洲视频| 亚洲精品国产肉丝袜久久| 日日噜噜夜夜狠狠2021| 少妇影院yy11111中文| caoporon最新在线视频草棚| 护士毛茸茸的性| 老司机AV福利资源在线观看| 色AV网站在线| 婷婷六月激情综合在线人| 尤物视频在线免费观看H| jjzz日本在线看| 日日摸日日碰夜夜爽暖暖视频| 97狠狠狠狼鲁亚洲综合网| 尤物视频综合在线| A级男女性高爱潮试看| 好男人社区www神马免费| 精品国产拍国产天天人| 动漫男啪动漫女在线播放| 国产精品小杨幂| 国色天香社区视频高清在线观看| 337P人体粉嫩炮高清大图| 国产原创巨作在线| 亚洲A∨免费视频| 国产熟女高潮精品视频| 国产美女双飞视频| 理论视频在线观看影片| 99久久国产综合精麻豆| 精品久久久噜噜噜久久| 一个人在线观看欧美www高清| 高清丰满少妇被爆白浆视频| w11111光屁股影院| 光棍影院亚洲福利| 久久ww久久综合久中文字幕| 亚洲欧美国产日韩在线天天更新| 动漫女处被破的视频在线观看| 久久夜色国产A∨| 国产亚洲精品影视在线| 久久精品五福影院| 最新免费高清不卡中文字幕手机在线观看| 中国农村河南妇女BBW| 爱做综合网| 操Av爽久| 天天拍拍天天摸| 亚洲自拍一区国产| 欧美老妇一区| 啊灬啊别停灬用力啊岳| 日女AV天堂| 试看20分钟做受视频午夜| 啦啦啦啦啦在线观看视频免费 | 美女被强躁免费视频网站| 国产精品欧美日韩| 大菠萝福建app导航入口| 五十路熟女久久| 精品偷拍亚洲| 96国产XXXX免费视频| 在线观看亚欧a| 精品女厕高清国产| YY6080福利午夜理论影视| 337p亚洲人体一区二区三区| 亚洲天堂网在线视频| 岛国一区二区三区视频在线观看| 激情刺激免费观看网站| 国产青年GAY同男视频在线收看| 一个人看的视频www欧美| 国产精品极品美女自在线观看| 护士好大好爽我要H小说| 久久这里一区二区精品| 粉嫩AV导航| 福利极品少妇水多| 精美三级一欧美人成视频| 在线观看扣喷水漂亮美女网站| yw开心五月婷婷| 麻豆国产区精品系列在线| 国产口爆吞精一二区| 一个人在线免费观看一区二区| 国产精品第1页久久| 成年性午夜免费网站蜜蜂| 欧美男男作爱videos可播放| 在线你懂得| 国产人伦视频在线观看| 狼人视频在线 1区1区3区4| 出差和岳梅开二度| 波多野结衣喷水视频| 久久人人爽人人爽人人AV| 亚洲天堂在线观看| 东京干男人都知道视频| 中文字幕播放视频不卡| 亚洲视频每日更新免费| tube8日本极品少妇| 亚洲美女视频之日韩精品| 色婷婷激婷婷九月| 国产精品小视频一区| 18AV在线首页| 福利视频亚洲se| 国产黑丝专区| 久久影视久久午夜| www大成色永久| 2019亚洲综合中文字幕| 日日摸夜夜添夜夜添影院| 亚洲综合美女va| jizz国产免费观看| 992在线视频| 国产伊人熟女| 在线播放视频国产区搜索| 又黄又刺激的视频免费网站| a在线观看v视频| 在线观看丝袜亚洲国产| 亚洲国产888| 好深好痛好爽视频| 国产极品嫩白精品| 玖玖资源站最新地址2| 另类亚洲欧美精品久久| 全部免费特黄特色大片看片| 国产熟女第一页麻豆| 一女多男3根一起进去视频| 巨胸喷奶水视频WWW在线观看| 综合网成年人美女| 国产免费高清视频青女在线| 亚洲午夜国产片在线观看| 亚洲图亚洲色成人综合网| 国产亚洲精品AA片在线爽| 久久九九又粗又大又圆又爽又硬| 尤物午夜在线| 久久亚洲制服视频| 不卡一区二区视频日本在线观看| 久久亚洲精品成人AV| 国产淫一妇| 一级调教视频| 午夜偷窥福利视频网站| 国产黑丝在线视频| 国产精品白浆一区二区| 国产AV-肉欲| 亚洲五码影院| 性视频在线乳| 最新国产精品丝袜在线观看| 久青草视频在线观看免费| 亚洲阿v天堂在线电影免费| A毛看片免费观看视频| 巨大巨粗巨长的黑人视频免费| 好男人在线观看直播视频| 国产一区二区精品久久| 16女下面流水不遮挡视频| 久久午夜成年奭片免费观看| 又黄又无遮挡又湿的视频| 韩国 日本 亚洲 国产| 亚洲依依人网| 国产在线正在播放| 波多野结衣家庭教师一二三区| 春色 都市 亚洲 小说区| 午夜亚州新电影日本物尤| 伊人少妇久久网| 91精品欧美激情在线播放| 亚洲婷婷网| 久久99热只有频精品免费| 国产专区AⅤ在线观看| AV天堂资源福利在线观看| 国产XX00视频在线| 亚洲理论在线a中文字幕| 女被男啪到哭免费视频| 国产2022最新精品露脸视频网站| 加勒比久久综合网高清| 久久亚洲制服视频| FREEEⅩXX性欧美HD| 2020最新国产自产精品| 极品少妇流白浆| 亚洲色大成网站www成永久网站| 风间由美一区二区| 精品黑森林AV片| 在线观看人成激情视频| 久久只有精品66国内| 野花视频免费观看高清在线观看| 伊人五月天网| 户外露出一区二区| 高中裸男洗澡GAY视频网站| 午夜激情视频网站| 国产在线观看18p| 最爽最刺激的十八视频| 深夜视频免费网址2021| 国产jjizz女人多水| 国产精品杨幂VA在线观看| 亚洲区欧美综合精品四区| 日本三级中国三级韩国三级| 无遮挡很爽很污很黄的网站w| 一道本不卡免费高清在线直播在线| 办公室娇喘的短裙老师| 日本三片国产三片美国三片| 在线观看亚洲男同网站| 午夜精品自拍| iGAO激情在线视频| 国产2022最新精品视频| 色综合天天色综合hd| 从后面抱住岳大屁股撞击玉梅| 妺妺窝人体色www在线图片| 激情图片激情视频| 中文专区欧美三级在线| 婷婷激情五月综合在线观看| 久久精品91麻豆| 伊人五月婷婷综合| 你懂的欧美在线| 波多野结衣手机在线aⅴ| 动漫久青草国产在线视频| 亚洲几把在线| 国产精品美女白嫩| 久久作爱网| 又黄又爽又猛的视频免费网站| 菠萝菠萝蜜在线视频在线播放| 特级xxxxx欧美| 精品偷拍各种美女嘘嘘| www女人天堂网| 亚洲国产女人AV| 色婷婷缴婷婷5月情综天天| 吃胸日下面视频在线| 白丝娇喘视频免费看网站| 中文岛国精品亚洲一区| 夫目前犯若妻波多野结衣在线播放 | 久久不卡免费视频| 衣服被扒开强摸双乳网站| 国内精品久久久久影院老司机| 动态图爱做在线视频| 在线天堂中文新版WWW| 色香阁在线看免费视频| 中文字幕v亚洲日本| 亚洲欧美另类激情综合区| 色婷婷四房| 在线观看黄aⅴ免费观看| 粗大进出身体视频| 国产69精品久久久久9999| a级黑粗大硬长爽猛片视频 | 香蕉网站美女被迷倒| 欧美亚洲日韩色| 少妇αv影院| heyzo一本久久综合| 中文字幕亚洲社区| 翁公在厨房和我猛烈撞击| 俄罗斯13女破苞| 97老司机在线观看| 国产女女疯狂磨豆腐视频| 国产在线精品一区二区三区不| 高中生久久久久经典视频| 尤物日韩在线| 69天堂网在线视频精品| 欧美成a人片在线观看网站| 国产性生大片免费观看性| www色多多色亚洲色| 69影院精品性视频| 夜夜春天天弄精品视频| 国产真实乱子伦视频播放| 国产精品小蝌蚪福利| 激情午夜福利网| 国产va免费精品观看精品| 婷婷色综合另类小说图片区 | 校花高潮抽搐喷水视频舔下面| 国产高中生精品日韩在线| 免费AV手机版在线看网站| 苍井空一区二区三区在线观看| 91p在线播放国产| 在线∨片免费观看视频| 在线精品自偷自拍无| 深夜福利私拍| 久久久久精品暗网| 2021日产乱码网站| 扒开女人下面网站| 97伊人一区在线视频| 一区二区三区高清無碼| 久热香蕉在线精品视频播放 | 在线制服丝袜自拍日韩APP| 尤物国产91色综合久久| 午夜少妇性影院私人影院在线| 白丝制服在线播放| 香蕉欧美大胸视频在线播放| 多人强伦姧孕妇免费看| 小草激情视频| 亚洲第九色区在线视频| 波多野结衣免费看AV片| 巨胸喷奶水视频milk| 日哟AV免费看| 亚洲女喷水视频| 极品嫩模高潮叫床| 黑人又大又粗又黄又长视频| 国产熟女老妇300部m| 亚洲福利精品在线观看| 深夜男受福利受视频在线播放| 啊啊啊,欧美wwww视频在线观看| 国产日韩麻豆专区| 欧美性色欧美A在线墦放| 又爽又黄刺激视频| 精品一区二区三区免费视频| 无遮档国产不卡在线视频| 极品美女冒白浆视频| 真实偷窥女子会所私密按摩AV| 日本不无在线一区二区三区| 午夜理论成人免费观看| 亚洲 资源 中文 字幕| 国产很爽的超薄丝袜脚交视频| 少妇把腿扒开让我添69| 日本亚洲语音视频在线观看| 欧美一级人与嘼视频免费播放| 国产AV二区精品| 大桥未久亚洲一区二区| 亚洲国产爱A∨在线观看| 嗯啊视频免费| AV一极品视觉盛宴在线播放| 午夜视频久久网站| 亚洲AV日韩AV成人AV| 青榴社区免费视频在线观看| 久久精品女人热| 日本不卡一区二区不视频| 国产大屁股喷水视频| 对白离婚国产乱子伦视频大全| 国产精品久久自在自线不| 久久久精品免费免费直播| 又色又爽又刺激的视频| 国产色爽女| 亚色在线播放| 黄频动漫在线观看十八禁| 美女大学女一二三区| 久久成人影院精品777| 麻批好紧日起要舒服死了| 色天堂无毒不卡| 又黄又粗又爽免费观看| 久久久精品调教| 国产а天堂2019| 按摩视频一区二区三区| 777在线视频免费观看| 国产丝袜被操视频国产在线观看| 国产偷国产偷高清精品 | 亚欧AV不卡第一区二区| 小馒头刚发育在线播放aⅴ| 亚洲男人的天堂在线aⅴ视频| 亚洲欧美性爱浪潮| 少妇的肥蝴蝶18p| 久久CAOPORN国产免费| 最近手机中文字幕大全| 好湿好紧好痛A级视频| 青草青草久热精品视频在线播放| 国产自产在线| 少妇111111| 8x国产永久免费高清在线| 在线观看非常黄的永久网站| 日本少妇一级精品| 国产的关晓彤AV在线网站| 最新AV网站在线网址观看| AV永久天堂| 小sao货水真多视频免费| 春药刺激国产老富婆露脸| 伊在人间香蕉最新视频| 美女脱个精光让男人桶尿口| 亚洲综合在线777米奇| 嘿咻嘿咻边摸边做动态图| 亚洲丁香色婷婷综合欲色啪| 亚洲人a成免费| 丝袜在线观看你懂的| 337P粉嫩日本亚洲欧洲大胆| 国产亚洲视频在线观看| 91伊人久久大香线蕉| 成人夜晚爱做免费观看| 6080午夜| 最新国产清纯美女在线观看| 欧美激情A∨| 免费又爽又大又高潮视频| igao为爱坐激情| 国产美女手淫高潮在线观看 | 亚洲精品污| 午夜一区二区三区影院| 国产自愉自愉免费精品七区| 俄罗斯精品女人一级在线播放| 又黄又粗又爽动漫免费观看| 少妇视频网站| 91精选在线国产| 翁熄粗长粗大满足少妇| A∨在线品爱网| AV片5G在线播放| 九月丁香婷婷综合激情| 好湿好痛好紧的A级视频| 91青青草原视频| 思思久久99热只有频精品66| 久久伊人尤物视频| 盗摄女人洗澡A∨在线| 另类尿喷潮videofree男人| 国产老师开裆丝袜喷水视频| 国产丝袜免费| 亚洲色大成网站www韩国黄| 动态图爱做在线视频| 中国产XXXXAaaa18片| 曰批试看10分钟| 老司机精品视频在线观看6| 人网站免费观看| 欧美同志视频免费| 一级欧美一级日韩片| 狠狠爱俺也色| 国产精品99久久免费2021| 自拍亚洲欧美在线成电影| 扒下她的小内裤揉捏视频| 伊人久久97| 熟睡中被义子侵犯在线播放| 又黄又粗又爽动漫免费观看| 国产高潮嗷嗷叫| 啊~嗯动态视频| 国产凹凸在线观看一区二区| 伊人中文字幕| 日本高清不卡免费一区二区三区二 | 欧美胖老妇老专区| 亚洲人成在线看片| 国产美女被遭高潮免费| 久久精品国产精品青草app| 亚洲成a人在线观看片| 91china国产在线video| 国产呦系列(753)视频观看| 国产邻居一区二区| 在线看片免费不卡人成视频| 久久综合给合综合久久| 久久精品嫩草研究院| 黄h鸡大网在线看| 在线观看免费一级AV| 黑森林精品导航AV网| 国内精品国内精品自线一二三区| 男同桌上课用手指进去了好爽 | haodiaocao妞这里只有精品| 久久高潮影院| xxxxxbbbbb非洲黑人| 杨幂性XXXXHD真| 午夜日本理伦中文字幕片| 丝袜屈辱日韩国产| 各种少妇正面bbw撒尿| 欧美激情在线观看免费不卡| 国产 抽搐 喷水 在线| 两性午夜刺激性视频| 日韩一区二区三区有码| 国内少妇自拍区视频免费大全| 高清国语自产拍免费中国国语 | 丝袜美女污污免费观看的网站| 首页 国产 熟女 中文 第 页| 粗暴玩弄虐H视频网站| 国产日韩精品欧美一区喷水| 国产美女主播丝袜高潮白浆| 国产区制服丝袜美腿在线| 久久福利新地址| 夜夜天天噜狠狠爱2019| 伊伊人成亚洲综合人网香| 妺妺窝人体色www聚色窝韩国| 97se亚洲综合自在线| 国产亚洲欧美日韩在线观看一区| 国产小伙和50岁熟女| 一级做AA视频免费看2019| 亚洲精品tv久久久久久久久久| 安眠药扒开女同学双腿玩弄| 久久精品国产亚洲大片| 麻豆久久久国内精品| 国产日韩āv在线| 国产在线国偷精品产拍| 韩国在线观看一区二区三区| yy1111111少妇影院光屁股| 1024手机基地看国产片3| 久久不能草亚洲精品| 国产欧美另类久久久精品不卡| 久九九久视频精品网站| AV在线制服| 自在线看精品国产高| 伊人久久五月| 尤物在线观看国产视频| 国产美女被高潮网站| 啊啊嗯啊啊在线观看厂| 男男♂动漫gv网站免费观看| 亚洲精品国产自在久| AV在线深夜福利浏览器| 一区二区三区少妇| 国内Av天堂| 欧美粗大猛烈进出| 久久一色本道亚洲| 激情丁香色婷婷中文| 日日夜夜狠狠操操| 亚洲免费福利视频一区二区三区 | 国产精品永久免费嫩草研究院| А√ 天堂资源| 99在线精品国自产拍不卡| 、中国精品VIDEOSSE| 亚洲视频 中文字幕 欧美在线 | 天天综合色天天综合色h| 艳星juliaann黑人开战| 人妖视频网站| 国产成年人拍拍免费视频| 精品露脸国产偷人在视频| 激情综合丁香婷婷色五月 | 日韩一区二区在线看精品 | 日本调教室强制高潮视频| 小sao货水好多真紧h网站| ZZIJZZIJ亚洲日本少妇| 久久精品大片免费观看| 2021AV天堂在线免费观看| JJzzJJzz免费网站| 精品一久久香蕉| 欧美最猛性XXXXX一| 色多多国产中文字幕在线| 亚洲另类自拍图| 国产a∨国片精品青草视频| 又黄又爽又刺激又免费视频| 高清国产天干天干天干古装片| 日本在线观看| 亚洲国产欧美视精| 欧美调教性奴在线观看| 2022AV无语在线观看| 亚洲图片日韩专区| 国产在线精品二区刘亦菲| 重口扩张女神roxyraye各种玩| 国产小片手机在线观看| 亚洲国产精品久久久久| 永久免费看mv网站入口| 媚药済み変态JK扩张调教し| 成 人 A V 免费网站| 精品下载视频观看| 亚洲手机看片AV| 亚洲天堂欧洲天堂| 色综合图片区| 亚州欧美中文日韩| 一少妇挑战三黑人4p| 精品伊人久久久香线蕉| 精品久久久清纯| 人与人性恔配视频免费| 久久精品这里有国家电影网| 亚洲嫩草影院久久精品| 久久久久久久久久久久久久久久久免费精品 | 偷自拍亚洲综合在线| 亚洲一区二区三区专区精品| 扒开末成年粉嫩的小缝完整版| 亚洲五月激情综合图片区| 午夜第一页欧美| 日本免费不卡二区專業知識| 日本高清不卡码| yy少归影院| 瑜伽国产在线视频二区| 国产精品自在线午夜精华福利 | 久久嫩草| 久久久免费精品视频国产| 在线观看最新中文字幕网址| 伊人久久大线视频| 日韩高清在线亚洲专区小说| 久久久国产99久久国产久}| 国产精品一区二区色爱| 国产精品一区手机在线观看| 极品美女流白浆视频| 国产在线成人一区二区三区| 国产高清在线精品一区app| 亚洲色悠悠| aⅴ调教视频| 大量国产私密保健视频| 激情综合色五月丁香六月亚洲| 国产欧美在线观看| 视频一区二区 风间由美| 成 人网站另类| 欧美日韩国产另类第一区| 亚洲人成网站色www| 32pao强力打造高清基地在线观看| 亚洲日韩最新AV一二三区右| 波多野结衣乳巨码无在线 | 亚洲香蕉无线免| 亚洲国产在化精品国自产拍| p网欧美高清免费作爱视频| 综合图区亚洲另类图片| 在线A免费V观看| 国产亚洲视频在线观看播放| 国产极品美女到高潮视频| 尤物在线看U不卡| 拍拍拍www| 成 人 漫 画 网 站 国产| 又大又粗欧美黑人| 日本道DVD中文字幕专区| 激情婷婷麻豆| 2019中文字字幕| 好大好粗91麻豆精品| 午夜激情电影免费在线观看| 国产精品videos麻豆| 97色婷婷手机在线| аwww在线| 97人洗澡人人澡人人爽人人模| 一进一出又大又粗爽视频| 久久久久国色αv免费看| 精品国产私拍福利电影| Japanese熟女娱乐部| 亚洲亚洲人成综合网站图片 | 印度幻女free性zozo交| 欧美日韩视频在线播放| 国产在线精品二区刘亦菲| 18欧美乱大交| 国产女人高潮抽搐喷水免费视频| 苍井空黑人巨大喷水在线观看| 国产精品jk白丝在线播放| 巨胸喷奶水视频www网| 丰满乱子伦视频在线| 亚洲巨制Av剧情在线| mm1314午夜福利在线| 天天老司机亚洲精品免费| 亚洲人成未满十八禁网站| 国产永久美国发布站旧版| аⅴ中文天堂最新版在线网站| 少妇喷水一级| 国产成年女人情侣视频| 亚洲aⅤ视频在线观看| 日本免费观看永久片| 美女羞羞喷液视频免费| 99热美女| 欧美亚洲另类国产18p| 亚州不卡網站| 97在线中文字幕免费公开视频| 2021国内精品久久久久精品| 2020天天做天天爱天天爽| 浓毛BBwBBWBBwBBw两性人| 人人爰天天做夜夜爽2020| 337p日本大胆欧洲亚洲噜噜| 人色一区二区三区| 久久久国产亚洲| 国产精品玖玖资源站大全| 又粗又黄的视频| 杨幂国产福利在线观看免费| 亚洲理论电影在线观看| 拨开少妇双腿挺进视频| 日韩精品片福利视频| yw视频 亚洲一区| 产亚洲人成网站在线观看| 亚洲中文字幕A∨在线亚| 尤物网址禁18| 第一福利视频网址导航| 扒开末成年粉嫩的流白浆图片| 黑人又大又爽个够免费视频| 亚洲永久网站| 亚洲a色| 国产好紧好爽大再浪一点视频| 国产肉丝袜在线视频一区| 久久精品国产一区二区三区| 久久九九有精品国产| 亚洲综合精品成人| 在线看片免费人成视频在线影院| 在线看片免费人成视频影院看| 亚洲人成电影网站图片| 亚洲日韩aⅴ小电影| 俄罗斯午夜福利片在线观看| 亚洲午夜未满十八勿入网站| 国产精品福利电影| h不要视频国产| 尤物在线不卡| 狠狠久久综合99| 嗯~啊~哦~别~别停~啊视频| 十八禁男男腐啪gv肉真人视频| 天天做天天摸| yy成年私人影院在线看| 伊人色综合久久天天人守人婷| 西西人体www44rt大胆高清| jlzz大全高潮多水老师| 啊 叫大点声 欠CAO的SAO| 亚洲人成网站77777亚洲| 又爽又刺激的视频网站| 亚洲综合色第十页| 成 人 桃 色 网| 岛国视频一区| 凹厕所xxxxbbbb偷拍| AV在线制服丝袜免费观看| 夜夜想夜夜玩夜夜爽| mmai精品视频在线观看| 亚洲va中文字幕欧美2| 午夜网站福利| 岛国AV动作片在线观看| 已婚丰满少妇21P| 亚洲精品国产综合久久一线| h片免费观看在线大全| 久久老太综合网| 欧美交换配乱吟粗大视频| 中国china体内裑精亚洲日本 | 久久观看免费中文字幕版| 亚洲一区三区| 嘿咻嘿咻免费区在线观看欧美| 阿v天堂2021在线| 天天摸天天做天天爽2020| 又黑又粗又爽的免费视频| 在线视频欧美日韩不卡一区| 国内美女白浆视频久久| 中国同志GAY片在线观看| 免费浪荡视频| 三上悠亚无蔗挡网站| 亚洲日韩在线中文字幕第一页| 你懂的国产呦系列免费网站| H无遮挡动漫在线观| 亚洲高清国产拍精品闺蜜合租| 亚洲人体免费视频| 粗大调教h少妇沦陷精油按摩中文字幕| 又色又爽又黄又浪视频网站| 国产91爱在线播放| 亚洲欧美激情一一区二区三区 | 在线观看人成影院| 自拍 15 国产| 嗯啊嗯啊不要午夜免费福利视频| 国产sm女女调教女m视频在线| 在线观看理论片一级| 五月婷婷丁香福利| 国产在线观看一区二区三区| 久久电影网午夜鲁丝片亚凤| 床震吃乳强吻扒内裤漫画| 538任你爽免费视频在线观看| 综合色区亚洲熟女妇p| 女人无遮挡又爽又刺激的视频 | 尤物在线观看不卡| 又黑又硬男人一进一出视频| 刺激仑乱一区| 午夜福利区免费看试验区| www.五月天| 天天爽夜夜欢免费视频| 国语自产精品视频在线看| 亚洲色婷婷爱婷婷丁香五月| h不要视频国产| 无遮挡H肉动漫在线播网站| 午夜福利亚洲| 色哟哟专区在线观看| 国产制服日韩丝袜86页| 欧美换爱交乱理伦片1000| 日本中文字幕三级少妇| 国产区在线视频明星在线| 国语自产精品视频在线播放| 亚洲色欧美另类| 91视觉盛宴在线| 97人人模人人爽人人6| 日本三级手机在线播放线观看| 巨大屁股女教师极品白嫩少妇| 国外性愛视頻αV免費看| 嗯~啊~网站视频| 正在播放熟女推油按摩| 亚洲精品污视频| 97日日碰日日摸日日澡| 99精品福利一区二区| 尤物在线导航| 337p粉嫩胞人体高清视频| XX.00动态图视频| 18勿进国产AV| 欧洲猛男少妇又大又粗| 无遮无挡女白浆视频免费| 公司Av一区二区三区| 国内自产拍自拍| yy111111少妇影院永久版| 国产女主播福利| 男人j放进女人p全黄在线| 国产69精品久久久久9999按摩| 久久人人爽爽人人片aV| 尤物综合| 天堂在线bt樱桃磁力搜索| 看国产黄大片在线观看| GV男同Gay在线观看| AAAA免费网站| 思思99久青草热精品免费观看 | 又长又大又粗又硬视频| 亚洲人a成免费| 一级女性高潮视频| 少妇福利久久| 别揉我的胸~啊~嗯~少妇视频| chinese真实偷拍videos| 各种少妇bbw撒尿| 日日干日日一区| 伊人色综合视频在线免费观看 | 国产呦系列(753)视频观看| 亚欧美少妇影院| 天天做天天摸| 亚洲韩国精品| 欧美换爱乱理伦1000部电影| 日本xxxx高清视频| 久久动漫一精品伊人| 亚洲影院在线| 国产婷婷午夜精选| 偷国内自拍视频在线观看手机版| 被水电工侵犯系列AV| 精品国产高清自在线一区二区| 国产日本欧美一区| 欧美 亚洲 动漫 激情 自拍| 亚洲精品网站在线观看你懂的| 尤物视频免费网| 精品动漫网站一区二区| 办公室丝袜秘书好爽好紧视频| 亚洲老熟女 @ tubeum tv| 婷婷 五月 香蕉| YW19成人免费视频播放| 果冻传媒国产报复老师| 国产人妖视频一区二区| 国产女主播一区二区二| 久久午夜福利精品| 久久精品在少妇| 亚洲片在线观看| 国产激烈刺激网站免费观看| 欧美v一区二区三区| 国产高清吹潮免费视频| 激情丁香婷婷综合中文字幕| 99久热re在线精品视频下载| 午夜影院亚洲视频| 国产午夜精品百合| 又污又黄的床上视频免费看| 国产黃色AⅤ免费观看| 欧美国产精品三级| 亚洲国语自产一区第二页| 香蕉网站永久在线视频| 满18点击进入在线观看| 国产乱子伦60女人的皮视频| 精品国产福利拍拍拍| 精品久久国产小视频p| 步兵一区二区三区在线观看| 亚洲五十路熟女| 在线播放国产一区二区三区| 俺去鲁婷婷六月色综合| 久久国产福利第一区| 正在播放国产水嫩美女叫| 在线中文字幕有码电影| 国产2022最新精品视频| 亚洲日韩精品欧美一区二区一| 亚洲Av库在线观看国产| 午夜性爽视频男人的天堂| 2019久久国自产拍精品| 巨胸喷奶水视| 亚洲AV黄页手机版在线播放| 亚洲色大成网WWW九久久| 亚洲私拍福利视频| 大伊香蕉在线播放97| 国产91video| 亚洲欧美变态另类激情一区| 又大又硬又黄又爽的视频| 一站久久精| 午夜拍拍拍无档视频免费qq群| 一区污网站在线观看| 女人打飞机免费看| 综合在线综合在线视频专区| www91免费视频| 亚洲激情视频| 极品粉嫩福利午夜在线播放| 91午夜激情电影欧美一区,二区| 国产制服不卡视频网| 69堂国产视频网站| 欧美肥熟性爱| 久久久亚洲国产| 激情综合色婷婷丁香| 亚洲欧美人成综合在线手机版下载| 国产美女视频福利| 中文字幕在线看成| 81cao草棚gao进入| 2019年天天夜夜爽| 自产拍在线观看| 中文字幕色中色| 亚洲中文字幕在线第二页| 国产偷窥女洗浴在线观看| 日本不卡不码高清视频| 在线观看娇喘喷水| 日韩高潮白浆| 国产A级片免费| 色综合伊人丁香五月桃花婷婷| 亚洲一区尤物最新视频| 欧美综合自拍亚洲综合百度| 高清痴汉一区二区三区| 免费视频久久久久| 色窝窝午夜福利视频| 99久久er热在这里都是精品66| 国产清纯一区二区三区| 自拍中文亚洲欧美制服| 99精品国产福利一区二区| 国产粉嫩00| 粉嫩白浆在线看| 身材超好国产在线播放| ◇一本大道香蕉中文在线| 欧美A∨小影院| 久久成年片色大黄全免费| 按摩AV在线不卡中文网| 成 人免费va视频综合网| 久久国产精品第一页| 嗯啊视频在线观看网站| 法国性xxxxx极品| 2022在线视频国产视频| 99精品热视频这里只有精品| 国产自产2020最新| 国产美女白浆视频播放| 少妇福利久久| 呦男呦女视频精品欧洲| 国产又大又硬又爽免费视频| 国产精品嫩草影院在线| 日韩无套白浆| 香港特黄一级视频| 国产日本欧美一区妲己影院| 乱码精品一区二区三区| 国色精品专区精品亚洲| 亚洲色大成网站www喷水| 2021AV手机在线观看网址| 国产精品亚洲аv天堂2021| 女被男啪到哭视频免费观看| 啊嗯好紧美女视频| 国产夜间精品视频| 国产后进极品翘臀在线播放| 福利视频综合| 把日出女人白浆免费视频| 痴汉在线一区二区| 丝袜国产激情视频| 亚洲一区二区自偷| 亚洲 另类 自拍 日本| 日韩一区二区三区免费| 中国男同GayAv网站| 被窝影院午夜看片爽爽在线收看| 疯狂做受XXXX免费| 免费观看的成年网站在线的| 日韩视频不卡免费观看| 免费看V网站农村姑娘AV| 中国女人毛耸耸Bxxxxx| 久久伊人www| 好紧国产免费观看视频| 52AV我爱AⅤ一区二区三区| 激情综合在线亚洲九月天| 91青青祝频免费| 紧身裙连裤袜波多野结衣| 国产精典999一区| 久久香蕉国产线精品| 欧美在线播放你懂网站| 999热久久这里只有精品| 在线天堂BT中文WWW| 欧美成 人免费网站| 中出极品少妇| 色妞网| 97色在线观看| 色WWW永久免费| 网站在线观看污| 国产成年女人特黄特色大片免费 | 国产乳头在线| 国产精品拍拍拍拍拍| 国产亚洲papapa| 国产极品白嫩精品| 少妇真实自偷自拍视频| 69堂久久精品正在播放| 国产午夜精华大片| 久久久久久精品影院| 伊人久在线视频| 成年女人免费久久| 九九线精品视频在线观看| 色狼人视频| 国产激情丝袜破除在线观看| 国产精品美女久久久久9999| 91婷婷激情| 亚洲成a人片在线观看app| 青青国产在线拍| 81cao草棚gao进入| 高H肉 偷拍 亚洲| 嗯~啊~网站视频| 欧美性爱免费网址| 99在线热播精品视频| 殴美夜夜操| 狠狠爱视频综合二区| 2020午夜理论一级在线| 99re66在线观看精品免费| 亚洲欧美日韩二三区在线| 欧美处破摘花精品| 精品国产品国语在线对白| 好男人社区神马在线观看www| 国产大学生真实视频在线| 人人天干天干啦夜天干天天爽| 欧亚一级视频高清在线| 久久国产欧美综合| 午夜免费刺激视频| 国产精品亚洲一区二区在线| 中美日韩印度亚洲综合在线| YY少妇影院11| 欧美白胖BBBBXXXX| 夜夜爱夜夜做夜夜爽| 国产午夜福利网| 777米奇影视亚洲| 天天爽天天爽免费视频| va天堂亚洲网站在线看| 亚洲综合色站| 朝鲜精品一区二区视频| 少妇久未伊人网| 又污又黄又无遮掩的网站| 日本嗯啊不要,视频| 不卡一卡三免费网站| 岛国永久免费| 二色天堂Av| 成 人 黄 色 网 站 视频 s色免费| 国产女人三级AV| 69天堂视频网| 日本一区二区三区视频在线播放| 精品国产欧美一区二区| 偏僻农村大乱纶| 久久99久久99小草精品免视看| 婷婷激情丁香| 欧美人与物videos另类| 日韩少妇150P| 国内自拍大神网站| h色在线观看网站| 亚洲欧美一区男男| 粉嫩NUDEBESTSHOWP| 国产素人在线观看人成视频| 天天躁日日躁狠狠老妇| 国产打屁股调教在线播放95| 在线观看免费国产v视频| 中中文字幕三区| 高潮在线看十八禁| 看全色黄大色黄女片| 五月激激激综合网播| 16女下面流水不遮视频 | 国产亚洲午夜福利在线| 西西人体444www高清大胆| 国产免费看久久久| 韩国久久一级| 日本特黄特色大片免费视频老年人 | AV不卡免费观看| 国产欧美日产一区二区三区大全| 大臿蕉香蕉大视频免费| 少妇真实自偷自拍视频| 亚洲美女福利在线播放| 2021AV最新高清在线播放| 2020最新大胆偷拍美女视频| 亚洲免费热女视频| 777久久久久久久| 99久热只有精品视频在线17| 曰本女人性高朝床叫视频| 性色qV国产精品| 国产精品网红主播美女| 亚洲涩图国产| 国产在线看片自拍| 国产尤物yw在线观看| 亚洲啊V天堂在线观看2021| 亚洲视频日韩视欧美视频| 高h视频亚洲| 国产精品亚洲艾草网| 16女下面流水不遮视频| 国产精品露脸国语对白| 真人强奷112分钟| 狼人色在线观看| 亚洲A∨在线| yy111111少妇影院在线电影| 久久人妇免费视频| 天天天天躁天天爱天天碰| 最新午夜国内自拍视频| 一级在线性视频| 尤物在线视频网| 又大又粗粉嫩18p少妇| 亚洲视频日本有码中文字幕| 色肉体在线| 婷婷香蕉五月网| A级完在线看完整版| 最新午夜福利在线观看网| 刘亦菲合成aⅴ在线一区二区| xxxx国产| 亚洲免费在线观看污视频网址| 亚洲免费一区二区三区超清| 又大又黄的刺激免费视频| 一级日韩免费大片| 97aⅴ人人爽| 日韩国产精品视频在放| 中国孕妇XXXXXXXXX孕交| 亚洲免费网站久久| 又黑又长黑人欧美一级| AV天堂高清不卡你懂的| 一个人的视频在线观看WWW免费| 91久久美利坚合众国保护网站| 国产精品亚洲А∨天堂网不卡| 白丝少妇aⅴ| а天堂最新版免费在线观看| 日日夜夜嗷嗷叫| 在线亚洲人成电影网站色www| 在线观看黄AⅤ免费观看| 和老外交换太大了第二部分| 天天做天天爱天天爽天天综合| 成人永久高清在线观看| 中国JAPANESE少妇高清| 中文字幕视频久久精品视频| 91久久精品在这里色伊人6884| 国产美女久久久| 高清在线观看视频BBXX| 娇妻被强行打开双腿灌满白浆| 黑色丝袜脚足国产在线看| 在线观看免费你懂的| 波多野结衣亚洲一区| Av在线手机国产| 干到爽死了视频| 101超级碰碰碰碰久久久久| 国产AV极品视觉盛宴| 西西大胆午夜人体| 国产呦系列(753)视频观看| 亚洲免费gv| 亚洲一卡二卡三卡四卡兔| 精品高清一区二区视频线欧美| 又黄又爽又色的视频一区二区 | 国产美女精品aⅴ在线老女人| 欧美黑人一级精品视频| 国产精品videossex国产高清| 在线国产中出| freexx性黑人大战免费视频| 尤物在线精品视频免费看| 少妇中文字幕网站| 亚洲A∨国产AV综合AV果冻| 又黄又刺激又粗又硬又大视频| 亚洲同人在线播放| 国内精品福利丝袜视频| 最近最新中文字幕h| 国精品午夜福利视频不卡麻豆| 成年女人免费视频永久vip| 精品视频在线观看免费观看| 亚洲自拍爱萝哟哟导航| 亚洲人成网站在线小说| 婷婷激情综合中文字幕| 亚洲欧美综合在线天堂| 国产高清AV首播原创麻豆| 亚洲鲁丝片一区二区三区| 久久午夜成年奭片免费观看| 日本香港三级香港三级人妇| 伊人2019视频免费观看| 亚洲va久久久噜噜噜久| 白丝高中生高潮视频免费观看| 日本中文字幕有码| 亚洲女同欧美在线| 99麻豆视频| 俄罗斯性bbbbbxxxxx| 日日麻批永久免费视频播放| h色在线看| 国产私拍福利在线永久视频| AV天堂高清不卡你懂的| 国产午夜精品视频| h在线网站| 女被男啪到哭视频在线看| 少妇被粗大的猛烈进出图片| 男女性潮高清免费网站| 很黄很污的网站| 亚洲最大中文字幕| 三上亚悠在线精品二区| 亚洲熟女少妇视频| 国产初毛初精| 尤物视频综合在线| 国产精鲁鲁网在线视频| 在线亚洲人成电影| 综合图区亚洲偷自| 久久99久久99精品免视看软件下载 | 国产小屁孩cao大人在线播放| 影音先锋熟女少妇资源网| wwwwwwww在线观看国产| 色多多在线观看精品| 有剧情国产剧情AV| 亚洲欧美日韩中文加勒比| 久久久国产精品麻豆| 婷婷国产天堂久久综合亚洲| 曰批免费视频播放免费40| 狠狠v日韩v欧美v| 99r6这里在线精品视频| 翁熄粗大交换王丽霞| 波多野吉衣AV一区二区三区| 快点我要高潮了好硬视频| 中文字幕 尤物视频| 波多野结衣视频区免费| 久久99久久99精品免观看| 国产麻豆剧传媒5区| 久久久久液| 爽~~~~舒服,好紧视频| 国产精品性事| 正在播放欧美女同一区二区| 亚洲一区二区电影视频| 国产激情视频一区| 国产色护士| 杨幂喷水高潮在线观看视频 | 另类 亚洲 图片 激情 欧美| 狠狠综合亚洲综合亚洲色| 中文字女同幕乱码无限2021| 国产大胸露脸在线播放| 东北不带套对白| 成年女人免费碰碰视频| 日本公厕所撒尿高清视频| 亚洲天堂在线观看免费视频| 手机国产亚洲欧洲自拍图片专区| 少妇高潮太爽了在线播放| yw尤物麻豆国产精品| 亚洲欧美日韩精品另类| 精品第一国产综合| 国产男女乱婬真视频不用下载| 亚洲一区二区三区专区精品| 久久精品麻豆综合网| 超薄丝脚交视频在线播放| 被公侵犯到怀孕中文字幕| 欧美40岁丰满少妇| 精品少妇XXXX| 好大好深好爽好硬我要视频| 波多野结衣一区在线观看| 老妇女擦她下面的毛茸茸亚洲| yellow中文字幕资源| 日日噜噜夜夜狠狠视频男男| 久久乐精品欧美国产免费搜索| h日漫在线观看亚洲| 性爱网址永久免费| 97狠狠狠狼鲁亚洲综合网| 国产99视| 久久久久久精品免费免费wer| 西西人体444wwf高清大但| 国产免费网址看AV片| 亚洲一区二区狠干| 午夜电影福利网| 无国产精品白浆视频| 国产H肉视频在线观看| 国产理论片在线播放| 极品少妇午夜福利水多多| 亚洲成片在线观看| 国内精品伊人久久久久7777| 一本大道香蕉久97在线播放| 巨茎人妖欧美hd| 99久久这里只精品国产99RE| 性xxxx视频播放免费| 亚洲午夜福利在线观看| 啦啦啦啦视频在线播放免费观看www| 欧美老妇人厨房乱子伦视频| 国产人碰人摸人爱| 91露脸极品magnet在线播放| 无遮挡很污很爽很黄的网站| 美女视频黄频大全免费的| 在线播放91变态白浆| 翁公在厨房猛烈的撞击| 成 人 a v 免 费 看| 亚洲性爱视频网站| 天天摸夜夜摸夜夜狠狠添| 777狠狠狠888| yellow中文字幕熟女| 99re免费视频精品全部| 色窝窝人体色www| 各种姿势玩小处雏女视频| 久久国产精品久久精品国产| 国产精品自产拍在线观看花钱看| 国产美女动态图在线看| 亚洲免费色色天堂| 黄污视频日本| 久久国产一区二区三区| 打屁股sp网站免费视频| 丁香综合激情熟女| 日本高清有码青草| 国产精品久久AV免费观看| 日本高清=区日本高清色| cao88888国产| 欧美日韩国产综合新一区| 国产精品亚洲w码日韩中文| 最新日本免费一区二2019年| 最新手机国产在线小视频| 老司机AV午夜福利精品| 高H中文在线视频| 久久亞洲國產精品1| mm131美女愛做視頻| 老熟女洗澡maturepom| 亚洲JIZZJIZZ少妇| 福利片国产在线观看| 久久国产伊人免费| 水好多啊,使劲插,真紧视频| 2021日韩中文字幕| 欧美日本日韩aⅴ在线视频| 久久国产偷任你爽任你| JIZZ视频在线观看| 唐朝AV影院| h黄在线观看免费视频网站| 在线观看亚洲一区二区三区| 国产精品99久久免费2021| 日韩美女乱婬试看视频网站| 中文字幕久久精品一区二区三区| 老师穿着旗袍肉色丝袜让我玩| 日本护士恋夜全部视频免费| 正在播放欧美在线看欧美视频免费 | 国产老师丝袜在线看| 97色榴网站在线观看| 亚洲欧美在线视频一区二区 | 欧美亚洲综合成人a∨在线| 亚洲国产无线码AV一区二区| 狠狠v日韩v欧美v| 亚洲精品国产高清在线观看| 中文字幕在线手机播放| 亚洲一区二区三区首页| 国产超级VA在线观看视频| CHINESE乱子伦XXXX国| yy111111少妇影院| 午夜高清国产拍精品福利| 中中文字幕三区| 一区二区三区高清晰不卡免费视频| 午夜视频在线a国产| 奇米网777色在线精品| 日本熟女 乱交| 国产韩国日本欧美三级在线观看 | 亲子乱子伦视频一区二区| 啊啊啊不要舔下面视频| 午夜色爱碰碰碰视频看看| 你懂的免费在线视频网站| 久久久久久久潮| 亚州一极生活片| 亚洲最新女人天堂| 精品熟女少妇久久免费| 伊人久久久艹| 国产在线精品一区二区动漫| 性屋娱乐26uuu亚洲日韩| 国产亚洲精品第一综合麻豆| 午夜福利激情| AV 手机天堂| 九九国产视频网站| 亚洲天堂久久五月天| 亚洲依依在线观看网站| 女邻居丰满的奶水| 黑人黑和白free欧美| 亚洲欧美国产日韩在线天天更新| 国产午夜精品不卡视频| 尤物视频在线免费观看H| v波多野结衣喷水| 欧美xxxx做受欧美88hd| 亚洲色大成网站www同| 国产欧美另类精品久久久| 国产在线视欧美亚综合| 中日欧美韩国在线观看| 正在做饭的少妇中文字幕| 在线 中文 天堂| 制服丝袜古典武侠| 国产视频xxxxx在线免费看| 天天摸天天添天天爱| 国产麻豆影院| 欧美白胖BBBBXXXX| 国外精品视频一二三区| 2021国产视频| 亚洲综合色第十页| 久久久久久中文字幕| 爱情岛论坛网站十八禁| 久久伊人五月天| 国产00高中生在线无套进入| 亚洲孕妇综合AV一区| 国产强奷伦奷片| 91亚洲人成手机在线观看| 国产第一页污| 14呦女精品| iGAO视频 为爱搞点激情 在线| 2020国自产拍精品网站不卡| AA级女人大片免费视频下载| 16女下面流水不遮图免费视频| 国产真实交换在线| 亚洲国产美女精品久久久| 国内精品 少妇| 99婷婷久久战| 成a人v一区| 就是色国产成 人 综合 亚洲| 国产污在线观看| 888欧美日韩色| 出租房白浆高潮在线| 尤物精品资源YW193网址| 久久波多野AV| 99久久综合狠狠综合久久| 大香伊蕉免费用视频| 久久思思97视频| 国内永久福利在线视频图片| 日本免费精品一区二区三区| 国内性生大片免费观看| 亚洲欧美综合区自拍另类| 午夜视频亚洲| 96 国产 在线| 婷婷色五月综合色尤物| 夜夜夜夜猛噜噜噜噜噜| 精品动漫一区二区三区| 狠狠pa免费视频| 一区二区三区不卡 自拍| 亚洲大成影院| 在线观看人成激情视频| 伊人久在线视频| 口工动漫视频精品一区| 抱姝姝亚洲| 伊人久久综合视频| 国内精品自国内精品自线电影|