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一卡
999zyz玖玖资源站免费在线观看| 天堂亚洲2017在线观看| 国产精品,欧美性爱| 久久激情小视频一区| 性aⅴ观看免费| XXXXX做受大片喷潮| 啊好爽快点好粗好爽国产视频| 日本亚洲色大成网站.www| 2018久久精品免费视频| 亚洲AV色精品| 青草久久久国产线免费| 小说区 亚洲 自拍 另类 | 3344在线视频免费播放| 欧洲 亚洲 国产| 国产午夜导航在线| 12-14幻女bbwxxxx在线播放| 自在自线亚洲а∨天堂在线| 亚洲综合图区小说专区| www久久国产| 渔夫床满艳史hd高清在线直播| 波多野结衣二区区在线| 熟女按摩spa偷拍| 国产丝袜在线精品丝袜不卡| 啦啦啦在线视频免费播放WWW| 久久国产热这里只有精品| 一级欧美一级日韩片| 很黄很爽的成人免费视频| 国产思思99re99在线观看| 爱v天堂在线观看| 精品网站 久久久| 中文字幕有码视频不卡| 高潮娇喘喷水在线| 一级a爰片免费线观看高清| 亚洲毛茸茸bbxx| 香蕉大黄区片| 两个人日本女人www| 性夜影院午夜寂寞影院春药| 亚洲无尺码视频| mm1313国产精品久久| 极品少妇流白浆| 久久伊人五月天| а√天堂网在线亚洲www| 亚洲欧美国产国产一区二区三区| 手机亚洲色大成网站www| 蝌蚪丝袜有码在线视频| 国产精品久久久亚洲| 在线观看你懂的视频网站| 青青草午夜视频| 精品久久99| 国产中文字幕一至六区| 日日摸日日躁夜夜躁免费| 亚洲国产综合精品2020| 99精品福利一区二区| 精品伊人久久久大香线蕉?,丰满大屁股熟女啪播| 狂野欧美精品| 在线观看连裤袜AV网站| AV不码不卡在线| 新怡红院AV在线永久免费| 亚洲精品高清国产一线久久| 国产精品亚洲片在线VA| 国产精品久久久久久久齐齐| 我的公强要了我高潮在线观看| 377p欧洲日本亚洲大胆| 国内精品 少妇| 成l人在线观看线路1| 国产AV美丽女教师| 美熟女A级作爱大片免费观看| 国产最新视频网| 天天爱天天做久久狠狠| 国产极品粉嫩泬免费观看| 亚洲欧美日韩综合一区在线观看| 国产闷骚女人视频在线| 亚洲女优呦男呦女视频八区| 精品国精品国产自在久国产不卡 | 亚洲一级无卡免费视频| 亚洲AV日韩徖合一区| 杨幂国产精品福利在线| 久久久久国产精品嫩草影院| 婷婷激情久久丁香综合伊人| h视频免费在线观看网址| 产在线拍揄自揄视频不卡| 久久综合视频免费不卡| 国产精品一区在线xxxx| 色多多在线免费k| 俄罗斯13女破苞视频| 亚洲天堂国产视频| 国产农村妇女一级系列 | 欧美亚洲精品影院| iGAO视频网免费观看| 国产99视| 又粗又黄又硬又爽的免费视频| 日本高清视频网站WWW| 国产熟女高潮流白浆视频| 2021久久国自产拍精品| 亚洲欧美中文字幕在线一区 | yw193尤物在线观看| 午夜亚洲精品无遮挡网站| aaaa性bbbb欧美| 中年熟女被啪高潮视频| 寂寞少妇做SPA按摩| 亚洲午夜久久久久| 国产精品裸模私密视频| 亚洲国内精品自在线影院| a网站在线观看| 翁公和在厨房猛烈进出A| 19禁久久精品| 美女的小泬泬流爱液视频| 日韩精品Aⅴ| 俺去啦官方网站最新地址| 在线免费观看喷水| 韩国国产精品男| 欧美破苞视频在线| 国产素人在线观看人成视频| 天堂AV网在线| 性欧美丰满顶级毛茸茸| 亚洲麻豆婷婷在线视频| 又色又爽又黄的视频大全| 春药高潮抽搐流白浆在线观看| 好爽又高潮了10分钟试看视频| 美女黄18以下禁止观看黄频 | 色婷婷激婷婷深爱五月| 另类综合在线一区二区| 熟女按摩spa偷拍| 手机版AV在线播放| 白丝美女高潮流白浆视频| 亚洲色大成网站www永久软件| 老司机午夜永久免费影院| 欧美日韩区1区2区3区| 天天噜噜天天爽| 国产特黄一级毛| www色多多色亚洲色| 亚洲h一区二区| 超级碰碰碰碰免费视频不卡 | 精品蜜芽成年网站在线在线播放| 888亚洲欧美| 啊啊啊不要视频亚洲天堂| 综合激情六月婷婷| 国产精品福利自产拍在线观看| 国产OO后高中生在线视频| 久久不卡免费视频| 国产簧片免费在线播放| 九九九免费观看视频| 又刺激又黄又爽又舒服的视频| 天堂网www在线资源男男| 50妺妺窝人体色www| 精品日韩久久久久久| 曰批免费全过程| 久久精品国产日本波多野结衣| 夜夜欢性恔免费视频| XVIDEOS免费人成视频网址| 中文乱码免费一区二区三区| 一本大道中文香蕉在线视频| 波多野结衣迅雷下载| 亚洲欧美另类在线图片区| 中国大胆老太性视频hd| 久久综合九色综合97综合网| 亚洲午夜国产片在线观看| 少妇推油高潮AA级无遮盖视频| 亚洲床戏一区| 亚洲高清成人AV电影| 啊v视频在线观看免费| 国产强奷在线播放免费不卡| 午夜免费A级福利片| 曰批免费看| 2022国产男人亚洲欧美天堂| 国产女同互慰高潮流水视频| 国产理论片在线播放| 亚洲偷自拍国综合色帝国| 一级码无在线观看| 凹凸福利午夜导航| 狠狠久久综合99| 被揉得好爽视频| 国产精品福利2020久久| 色婷婷综合激情中文在线| 国产午夜一区二区三区| 羞羞影院爽爽免费观看| 亚洲一区二区三区日本久久九| 粉嫩白浆在线播放| 波多野结衣多次高潮三个老人| 2019年国产在线不卡a| 极品白嫩尤物456在线观看| 久久精品国内偷自一区| 在线播放91变态白浆| 两根粗大同时进出视频| 亚洲日韩第一页涩涩涩| 制服国产AV| 加勒比高清不卡波多野结衣| 高潮白浆喷水美女网站| 中文字幕欧美123| 日本被黑人强到高潮不断视频| AV天堂永久免费| 欧美日本韩国三级| 更刺激更黄的视频播放| 精品国产自在久国产87| 18未成免费在线观看| 亚洲日本va中文字幕在线不卡| 女人窝人体色WWW在线观看| 免费久久人人网站| 一个人在线看AV| 亚洲成AV人精品自偷拍| www五月综合网麻豆| 精品国产日韩亚洲一区| 午夜亚州国际理论| 日韩无遮挡在线| 久久久久久久岛国免费AⅤ片| 一级特黄大片在线观看| 99久久婷婷国产综合精品| 赤裸裸美女AV在线网址| 国产ai刘亦菲精品一区不卡| 国产精品流白浆喷水| 色内内在线观看视频| 中文字幕韩国激情视频网站| 小受咬床单失禁的gv在线观看| 国产在线观看每日更新| jijzzizz老师出水喷水多毛 | 一区二区三区a视频| 真实国产乱子伦对白视苹不卡| 99re66热这里只有精品| 在线白嫩| 亚洲一区二区三区播放在线| 在线的最新免费国产| 一个人在线观看Avwww高清| 嗯,啊。日韩| 青青青国产的视频在线播放| 日本免费在线视频| 亚洲午夜精品A| 超薄丝脚交视频在线播放| IGAO为爱寻找激情在线看| 亚洲www天堂| 影音先锋色天天| AV天堂免费网址| 午夜精品福利视频e| 欧美激情影院,国产高清电影 | 暴力强到最舒服奷伦小说| 欧美一级黑人一级| 青榴一区二区三区在线| 少妇配种视频在线观看| 曰本韩国三级在线| 嗯啊在线免费视频| 精品国产永久| yy111111少妇影院在线观看| 成 人 黄 色 网 站 S 色| 中国精品久久精品三级| 亚洲伊人久久综合成人| 日本极品a级片| 黄又色又污又爽又高潮| 亚洲人成777| 阿v天堂在线观看2021| 997 久久 国产| 欧美色美人在线视频手机在线观看| 免费高潮了好湿h视频| h日韩精品| 在线伊人男男| 国产美女爽到喷水| 大香伊蕉在人线免费视频| 樱桃视频一区二区三区| 初毛初精G 网站| 极品yin荡合集视频| 国产打屁股免费区网站| aⅴ淘宝国产在线观看| 亚洲精品熟女国产| 亚洲一区公司在线| 久久综合久久鬼色| 午夜福利网站18| 女人一区二区三区视频| 欧美亚日韩在线日本在线| 黄h鸡大网在线看| 国产精品日韩专区第一页| 国产1卡2卡三卡入口| 亚洲日本乱码在线观看| 亚洲免费影院香蕉| 韩国人体vps国产在线视频| 日本高清一区和二区免费| 国产67久久久噜噜噜| 杨幂日韩视频一区| 色多多视频在线观看视频在线| 成片免费观看视频在线| 男女猛烈无遮激烈太紧| 啊v视频免费在线| 亚洲午夜精品一区二区三区| 国产m片在线| 国产高清重口变态sm在线观看| 自拍偷拍区一区二区三区 精品区| 日日夜一区二区三区| 2022最新在线观看视频美女性爱| 亚洲综合你懂的| 精品20p在线观看| 老司机在线精品视频网站| 亚洲国产精品嫩草影院久久| 尤物国产精品福利三区| 经典国产偷自视频区视频真实| 尤物麻豆AV在线| 亚洲色Av性色在线观看美女| 68XXXXXXXXX视频| 99婷婷久久战| 免费人成在线观看网站| 综合另类11p| 亚洲综合色在线视频www| 亚洲影院天堂中文AV色| 中文字幕 H文| 午夜福利在线观看2| a v网站在线看| 久久夜色国产精品一区| 久热爱精品视频在线9在线观看| 国内精品自线一区二区三区20| 在线看国产专区张柏芝| 国产精品v欧美精品v日韩精品| 亚洲H漫在线| 嘿咻动态图超猛烈视频欧美| 又大又硬又骚又黄| 国产第一亚洲| 国产精品美女冒白浆| 天天做天天愛天天爽 | 又长又粗又爽又高潮的视频| 国产成 人 综合 欧美 亚洲| 99久在线国内在线播放免费观看 | 亚洲va久久久噜噜噜久久,一| 曰的好深好爽好紧的视频| 在线观看无遮掩视频| 天堂网AV在线播放| 亚洲全国最大的色惰网| AV高潮在线| 光棍影院亚洲第一区| 99国产超薄丝袜足j在线直播| 精品国产自在久久成人| 亚洲国产中出在线观看| 永久免费AV网址| 久久综合色另类小说| 50岁毛茸茸视频| 亚洲激情四视频| 国产欧色美视频综合二区| 亚洲一区在线观看尤物| 白浆免费网站| 久青草影院在线观看国产| 日本少妇被黑人xxxxx| 777米奇影视四色俺| 精品国产yw在线观看| gogo高清全球大胆高清| 高潮熟女正在播放| 厨房里摸着乳丰满大屁股| 久久久国产一区| 中文字幕日韩精品亚洲一区| 在线综合亚洲欧美日韩| 亚洲另类图区影音先锋| 把腿张开我要添你下面| 伊人丁香综合在| 日日摸夜夜操的视频| 精品国产香港三级| 欧洲vps一级女片观看| 亚洲中文AⅤ中文字幕| 欧美亚洲日本韩国一区| 尤物性视频在线播放| 久久综合九色综合久桃花| 国产专区女高中生第一次破| 色久悠悠影音先锋| 日韩换脸一区二区三区 | 色多多永久网站| 久久综合论坛| 欧美一卡2卡三卡4卡在线| 国产欧美在线观看| 亚洲人成综合第一网| 在线观看 一区| 国产不卡的丝袜综合在线| 一级少妇精品一区二区三区| AV片在线播放| 亚洲精品国产品国语在线| 国产日韩欧美综合专区| 自拍偷拍网站| jiZZ大全高潮水多| 三上悠亚在线精品二区| 麻豆最新国产AV原创精品| 美女又黄又爽又色的视频| 久久精品国产字幕高潮| 最新欧美性爱精品一区二区三区| AV淘宝国产首页在线观看下载 | 182tv午夜福利免费路线一| 杨幂视频 国产在线| 国产在线狂喷潮在线观看| 国自产拍在线天天更新网站| aV蜜芽中文字幕在线观看| 亚a在线| 久久精品久久久久久齐齐| 一区在线网站| 又硬又黄又舒服的视频| 亚洲va在线观看网站| 国产小屁孩cao大人免费| 2020最新午夜福利视频合集| 亚洲乱亚乱妇24p高清完整版| 尤物193国产在线精品| XXXXXBBBBB性受| 老司机精品视频在线| 一区二区理伦视频| 韩国激情电影久久久| 快点我要高潮了好硬视频| 亚洲AV片劲爆在线观看| 亚洲成AV人片在线观看天堂无| 亚洲AV我要你XX精品推荐| 亚洲午夜福利一级无吗| 黑人又粗又大一| 国产女同作爱系列闺蜜| 亚洲性夜夜天天天| 2021AV天堂视频在线播放| 嘿咻嘿咻免费区在线播放| 亚洲依依成人综合网站| 欧美激情图片和视频| 亚洲成AV人片在线观看无| 51社区在线永久视频| 美女下面揉出水免费视频| 久久久精品一区二区| AV片在线观看网站免费的| 视频区国产亚洲欧美| 又爽又刺激的免费视频动漫| yy111111少妇影院手机在线观看| 夜夜春夜夜爽小视频| 十八禁在线永久免费观看| 中文字幕国产巨臀一区二区三区| 亚洲2021AV天堂手机版| 中国呦交在线观看| 九九热这里只有精品99剧情简介| 开心激情五月天在线视频| 国产开嫩苞在线播放视频| 天天视频H| 国产农村妇女一级AV片| 亚洲曰韩欧美综合色另类小说| 九九热爱视频精品视频| 天天爽夜夜爽免费精品视频| A级国产乱理论片在线观看9| 国产青草视频在线观看| 亚洲揄拍图片色区图片专区| 极品白人性网站| 不卡一区二区视频日本| 国产在线不卡一区二区三区| 国产高清在线有码中文字幕| 亚洲欧美日韩在线一区二区三区| 日本教师奶水四溅观看| 亚洲永久精品ww47香蕉图片| 久久国产午夜理论片| 妺妺窝人体色www在线直播| 亚洲中出在线播放| Av在线鲁丝片一区二区三区| 黄又色又污又爽又高潮网站| 粗精捣泬np白视频在线观看| 国产在线不卡精品网站| a岛国大片免费观看| 禁十八男女污污污午夜免费| 欧美老妇乱惀| 久久精品福利中文字幕| 人成视频中文字幕免费在线观看| 粉嫩虎白女流水的视频| 天天做日日做天天添天天欢公交车| 性动态无遮挡| 亚洲美国产亚洲AV| 992TV快乐视频一在线| 国产麻豆hdfreesexvid| 一本大道手机在线看| 三上悠亚亚洲日韩二区| 2020日本大片免a费观看视频| 久久社区久久久久| 亚洲本道一级视频免费| 黑人综合日韩| 国产丰满乱子伦麻豆| XXXXX69日本少妇| 2018天天玩天天爱天天吃| mm131在线观看福利| 老司机视频网站| 亚洲午夜精品不卡| 吹潮视频国产免费观看网站| 国产欧美日韩综合aⅴ天堂| 和老外交换太大了第二部分| 国产免费高清无需播放器| 久久天堂AV综合合色| 日本一区二区三区视频在线播放| 午夜a级理论片在线播放717| 超熟六十路!浓厚交尾| 亚洲成a人片在线观看的电影手机在| 日本丶国产丶欧美色综合| 国产精品一区二区三级| 亚洲国产原创私拍精品| 自偷自拍亚洲综合精品| 97夜夜澡人人爽人人喊中国片| 精品女厕高清国产| 高清无h码动漫在线观看尤物| 视频福利国产专区精品大全| 2019中文字幕乱码免费| 337p日本欧洲亚洲大胆人人| 久久精品国产2020| 高清无h码动漫在线观看尤物| 精品不卡高清视频在线观看| AV网站在线观看白丝| 波多野结衣好大好紧好爽| 日批视频在线看| 大香伊蕉在人线免费视频| 国产天堂网| 国产女人喷水抽搐爆白浆视频| 91极品尤物国产在线播放| 国产2018大屁股福利| 国产大全国产综合精品女同| 国产精品张柏芝久久| 午夜在线精品福利在线观看| 国产福利酱视频资源福利| 污污污污污www网站免费| 69久久国产精品视频| 久久免费视频6| 国产亚洲日韩AV一二区| 2019天堂福利亚洲| 国产刘亦菲一区二区三区在线播放| 2020日本大片免a费观看视频| 真人XO无遮挡gif动态图图| 性多多欧美在线播放| 丁香婷婷综合在线麻豆| 亚洲—本道中文字幕久久| 亚洲成a人片www| 波多野结衣AV一区免费在线| 国产非洲中文字幕| 杨幂激战黑人久久影院| 女教师巨大乳孔中文字幕| 又粗又硬又长的的免费视频| 国产白丝视频无遮挡| 毛茸茸的少妇疯狂做性| 麻豆AV网址| 国产高清视频在线观看69| 国产同性女女互磨在线播放| 国产又刺激又黄又免费的视频| 综合亚洲图片一区在线| 亚洲日韩护士病人AV| 国产91丝袜美腿视频在线观看| 十八禁网站免费进入| 久久国产午夜精品理论| 尤物yw在线视频| a级理伦午夜日本区| 亚洲日韩欧美综合在线的| 国产精品v欧美精品v日韩精品| 2022AV网站在线播放| 又爽又黄无遮挡的动态图| 高清性欧美ⅩXX| 午夜视频高h在线| 精品国产品香蕉在线,| 久久精品视频按摩| 国产女人天堂| 日日摸夜夜狠狠| 久久精品女人天堂aⅴ| 亚洲va久久久噜噜噜久久4399| GOGO全球大胆高清人体在线播放| AV一区网站| 亚洲另类制服激情制服丝袜 | 暖暖www视频免费高清最新期 | 亚洲中文在线播放一区| 国产女合集第六部| 在线看片免费人成视频久网app| 韩国精品大片免费观看| 亚洲免费网站久久| 国产精品高清一区二区不卡片| h视频在线观看导航| 亚洲很黄免费视频| 开心五月激情网| JIZZ抽搐高潮| 天堂在线bt樱桃磁力搜索| 高潮娇喘抽搐在线观看| 揉捏穆桂英双乳三级视频| 西西人体大胆高清窝窝www| 亚洲小电影你懂得| 成年女人片免费看| 2019亚洲免费网站观看视频| GOGO全球人体亚洲高清大胆| 丰满五十路熟女高清免费视频| 午夜大胆视频| 国产精品2| 欲求不满的按摩中文字幕| AV天堂免费在我观看| 欧美 白丝 喷水| 肥大BBwBBWBBw高潮| 天堂在线精品亚洲综合网| 色久窝窝| 丝袜美女污污免费网站| 鲁鲁草视频| 99XXXX综合缴情网丁香五月天| 天堂亚洲欧美| 成人AV高清不卡在线| 国产精品白浆在线观看免费| 久久99国产综合精品| 校草18厘米撑破内裤| 日本亚洲色大成网站www久久| 精品国精品国产自在久国| 日日摸夜夜操| AV每日更新 在线观看| 精品日本久久久久久久久久| 亚洲A∨网址| 尤物午夜在线| 久热亚洲视频| 思思久久美女软件免费观看| 午夜福利体验试看120秒| 久久久噜噜噜久久中文免费| 亚洲按摩在线视频| 激情婷婷基地| 2022国产区在线| 尤物国产综合国产综合| 在线一区视频| 小姪女下面粉嫩多汁| 午夜影院操一操视频| jk美女露出尿口| 久久天天躁日日躁狠| 丝袜高潮视频免费| 无遮挡男女一进一出视频真人| 制服中文字幕第1页| 亚洲粉嫩高潮的18p图片| 一区二区三区精品道| 337P粉嫩日本欧洲亚洲大| 激情加勒比中文| 午夜小电影网站| 亚洲综合图色40p| 国产高清在线精品黑人一区| 干老熟女视频| 91麻豆精品国产自产在线观动漫 | 久久精品国产99久| 中文亚洲成a人片在线观看| 2022AV视频一区在线播放| 又爽又黄又湿在线网站免费看| 又黄又爽又大又硬的免费视频 | 国产欧美日韩一区二区三区| 性生大片免费观看高清视频| 理伦亚洲手机在线观看| 中文字幕欧美日韩一区二区三区 | 夜夜高潮夜夜爽夜夜爱| 欧洲性XXXX免费视频在线观看| 尤物在线193| 日本卡一卡二新区乱码网红| 成年大片免费视频网站| 12—14幻女WBBXXXX在线播放| 少妇人影院| 国产美女精品视频线播放| 波多野结衣电影一区| 久久婷婷综合缴情亚洲狠狠| 白嫩国产在线观看| 鸭子tv国产在线永久播放| 色www永久免费视频| 国产性行为视频免费观看| 奇米影视7777久久精品| 成h免下载视频| 国产一区二区很干视频| 精品99在线黑丝袜| a欧美亚洲日韩在线观看| 国产娇小粉嫩在线播放| 国产极品嫩白精品| 99九九免费线视频精品| 高潮亚洲福利| 狠狠狠免费网| 日本一本清乱码高清BD| 婷婷六月综合缴情在线首页| 国产中文一区二区苍井空| 101超级碰碰碰碰久久久久| 亚洲自偷自偷图片自拍| 中文字幕日产乱码2020第一| 国产曰的好深好爽免费视频aaa| 8090成年在线看片午夜福利| 一区五码在线| 国内综合视频一区二区三区| yy111111少妇欧美| 在线观看亚洲色自拍一区| 欧美成在线观| JapaneseXXXX乱子另类| 久久国产精品-国产精品| 视频二区中出| 野花韩国视频在线观看免费播放大香区 | 国产乳头在线| 人成亚洲香蕉久久| 国产二区交换配乱婬| 日本A级片网址| 女上男下边做边叫视频免费 | 亚洲日韩欧美每日更新| 久久精?色另类小说| 午夜影院 尤物视频| 6080yy国产精品| 24小时日本在线WWW免费的| 大学生扒开粉嫩喷白浆| 开心五月日韩精品| 国产刘涛AV免费精品| 2022国产男女视频| 在线视频 宅男色| 有码 中文字幕| 91青青草原在人线免费| 精品H动漫无遮挡在线看尤物| 色老汉免费网站免费视频| chinese第一次处破血videos| 18成禁天堂网站| 刘亦菲激情旡码大片| 尤物tv在线国产剧情| 精新精新国产自在现| 多水少妇视频网| AV不卡免费在线观看网站| 正在播放玩弄少妇的大屁股 | 2021最新午夜在线视频| 两性色午夜视频免费老司机| 日本不卡一区二区不视频| 在熟睡夫面前侵犯我在线播放 | 国产2022综合在线观看| 午夜精品2021| 午夜福利亚洲自偷自拍| 老妇女五十路| 尤物日韩在线| 欧美VIDEOS粗暴| 亚洲第一天堂中文字幕国产精品| 本道综合精品视频| wwwsex国产精品| 在线看国产专区张柏芝| 亚洲美女色吊丝| 波多野结衣AⅤ高清不卡在线| 日本成本人片免费网址在线观看 | 免费看男人j放进女人屁股里| 又黄又爽又深又粗又大的视频| 在日本看免费XXXXXX| 日韩麻豆小视屏| 久久AV三级娱乐视觉盛宴| 韩国日本免费不卡钱在线看| 欧美日视频777888| 嗯啊视频中文| 国产精品久久久久精品麻豆| 一边捏奶一边高潮视频| 好好的日在线视频观看| 制服丝袜第一页在线观看| 多人强伦姧美女免费看| 久久女色综网| 亚洲 欧美 国产 制服 动漫| 东北女人水多毛多免费看视频| 国产精品第19页| 狠狠操一区| AA级九九视频| 亚洲三级在线看久草| 67pao国产成视频永久免费| 亚洲综合色区在线播放剧情简介| 波多野结衣AV不卡| 国产毛茸茸性爱视频| 亚洲中文字幕第一视频在线观看| 高中生裸男洗澡gay视频网站| 一本久道久久综合| 2021精品福利在线观看| 国产电影一区二区| 亚洲百合片在线网站| 越猛烈欧美xx00动态图| 精品国产一区二区三区久久| 18以下禁止入内免费网站| 夜夜欢视频| 亚洲阿v天堂视频在线观看| 97中文字幕| 狠痕鲁2021国内揄拍国内精品| 啊嗯不日本网站| 少妇高潮伦| 色天堂视频网站| 又色又爽又黄的三级视频| 男人天堂AV在线麻豆| 97自拍超频在线| 九月丁香激情在线| 性奴调教在线观看视频1区2区| 性多多欧美在线播放| 国内真实愉拍系列在线观看| 亚洲视频高清不卡在线观看| 国产大全三级a午夜电影免费| baoyu135国产精品tv免费| heyzo高清中文字幕| 亚洲污污视频厕所| AV在线调教| 阿v天堂在线观看| 2018日日摸夜夜添夜夜添视频| 老司机三级日本| 国产制服啪| 亚洲中文字幕aⅴ天堂| 草裙社区免费视频一二三区| 同性男男黄h片免费网站| 激情综合色婷婷丁香| 又大又黄又硬的视频| 欧美禁忌乱偷在线观看| 极品嫩模高潮叫床视频| 小说区图片区欧美日韩电影| 亚洲成Av| 亚洲成国产人片在线观看| 制服中文字幕第1页| 大胆动漫美女赤裸网站| 国产аⅴ中文天堂最新版在线| 亚洲日韩AV片h| 美女扒开双腿露出尿口无内裤图片| 亚洲国产欧美日本视频| 呦男呦女视频精品导航| 亚洲阿v天堂最新版本2019| 五月综合缴情婷婷六月| 久草户外爱AV| 一欧美三级在线观看| 亚洲另类欧美综合久久图片区| 动漫激情精品| 又黄又爽做受视频免费看| 9191精品国产免费| 亚洲自偷自拍另类小说| 亚洲综合憿情五月丁香五月网| 亚洲成a人片在线中文| 又湿又紧又大A视频| 97精品免费公开在线视频| 99精品偷自拍| 亚洲成色在线网站| 啊啊啊不要日啊啊啊动态视频| 在线观看h的网址| 国产高清 在线播放 26uuu| 中文字幕最新在线视频| 中出高潮流白浆视频| 四十,五十路丰满熟女中出| 欧美十亚洲十日本激情视频| 五月婷婷精品| 精品香蕉久久久午夜福利| 伊人五月丁香综合AⅤ| 婷婷开心色四房播播| 久久久久久精品免费免费麻辣 | 性视频导航福利| 好吊色永久免费播放| 国产免费人成视频在线观看| 日韩一区二区肥| 2022男人的天堂网| 乌克兰孕妇做a视频| 中文字幕 国产精品| 亚洲国产精品高清在线第1页| 五月天丁香视频在线精品| 出喷水来视频30分钟| 日韩一级欧美一级作爱片| 婷婷激情五月在线| 国产又色又刺激的视频黄| 日本精品小电影在线观看| 国产精品第21页| 邻居新婚少妇真紧| 在线观看AV女主播| 99亚洲艹综合| 成熟yⅰn荡| 亚洲国产精品第三页| 亚洲日韩久久AV| 久久一色本道亚洲| 呦女网站| 国产高清精品综合在线网址| 久久艹国产| 国产喷水一区二区在线观看| 影音先锋男人男人资源站| 9禁无羞遮视频在线观看| 在线看A∨中文字幕| 色福利视频导航| 久久精品久久精品中文字幕| 在线免费看国产污| 日日摸日日碰夜夜爽免| 被暴力强行玩弄到高潮视频| 天堂天码Av影视亚洲无毒不卡| 国产在线欧美一区二区| 国产粉嫩高中生无套第一次| 五月激激激综合网亚洲| 午夜喷水福利视频| A级里粗大硬长爽猛视频| 国产AV白丝一区| 特别黄的免费大片30分钟左右| 尤物AV电影在线观看| 娇喘视频大全在线| 国产精品亚洲二区在线观看 | 正在播放嫩白美女在线| 日本一大新区免费高清不卡 | 国产专区aⅴ在线观看| 高潮精品导航| 日本护士恋夜全部视频免费| 亚洲一区二区在线精品播放| 光棍影院一二区| 亚洲双飞一区二区| 2021最新久久精品视频| 亚洲日韩中文第一精品| 国产午夜福利不卡麻豆| 78色国产精品| 少妇饥渴偷公乱视频| 国产精品H在线播放第一页| 被男人插到抽搐视频在线| 国内免费自拍1视频| jk制服白丝喷水短裙出水视频| 国内自产少妇自拍区免费| 粗大狠狠的进出她的体内| 好吊妞无缓冲视频观看| 久久精品精品撒尿网| 俺去啦俺来了| MM131美女三级视频| 波多野结衣一区二区三区AV| 坐在线观看国产视频| 天堂精品伊人| 久久国产精品亚洲系列| 国产精品一区AⅤ影院| 日本女人高潮视频| 最新尤物在线综合不卡视频| 在线午夜精品自拍小视频| 国内免费的AV网站| 粉嫩高中生的第一次| 999精品色在线播放| 一区二区三区H女| 在线亚洲精品国产二区图片欧美| 8x福利导航| 精品婷婷色一区二区三区| 亚洲一区二区电影| 夜夜躁日日躁狠狠官网| 丝袜美女喷水视频| 极品美女流白浆免费视频| 大胆顶级欧美A级视频| 国产一区麻豆精品一区 | 自拍偷自拍亚洲精品偷一| 午夜中文字幕屏蔽| 久久综合缴情亚洲狠狠| 世界美女大学生被干冒白浆| 欧美成亚洲成在线| 少妇高潮A一级| 2022国产城人在线视频| 水真多夹死我了真紧H视频| 亚洲色熟女图激情另类图区| jizz一区二区| 扒开女人下面使劲桶视频| 无遮挡又爽又刺激的动态图| 日本苍井空免费人成视频播放| AV福利导福航| 在线观看免费AV网| 欧美三級片黃色三級片黃色1| 2021AV免费在线观看| 2019a不卡视频| 欧美性爱精品国产12| aV电影网国产| 中国人XXXXX69免费视频| 午夜福利000| 自在自线亚洲а∨天堂在线| 中文字幕亚洲无线码在线一区| 在线观看欧美性爱| 国产啪精品视频网站免| 国产chinese永久免费video| 熟女无套高潮内谢吼叫| 少妇SPA多次高潮| 在线观看国产网址你懂| 亚洲精品揄拍自拍首页一| 亚洲天堂网最新| 国产亚洲欧美精品永久| 丝袜美女喷水视频| 极品国产AV| xxxx999精品视频| 婷婷色在线视频极品视觉盛宴| 亚洲444kkkk最新| 亚洲国内精品自在线影院| www.色香蕉| 另类亚洲其他中文另类| mm131亚洲美女视频| 久久青草38国产| 草草国产浮力| 亚洲综合小说区图片区| 一 级 黄 色 片免费的| 伊人影院蕉久院在线| 国产精品video区三区| 处破女视频免费观看亚洲| 口爆吞精影院| 无遮挡很爽很污网站| 亚洲女优一区| 2021在线视频你懂得| 久久久精品久久久AV| 午夜在线网站观看小舞被操| 一 级 黄 色 片免费的| 国精品产露脸偷拍视频1024| 日韩视频在线观看…| 在线看片免费人成视久网app| 国产很爽的超薄丝袜脚交网站| 色综合图片区| 真人啪视频免费视频高清| 91偷拍老熟女| 国产精品免费视频网站| 久久久精品2019免费观看| 粗大嗯啊免费视频| 日本aⅴ精品中文字幕| 久久精品呦女导航| 国产乱子伦精品免费视频| 风间由美 一区二区| 国产亚洲欧美在线观看三区| 亚洲成AⅤ人片久青草影院| 久久精品五福影院| 国产在线看片成人免费视频| 亚洲乱伦片日韩| 日日摸日日碰夜夜爽歪歪r| 风流老太婆大bbwbbwhd视频| 777米奇影视亚洲| 老外下面好大免费视频| 综合亚洲色hezyo| 国产BBW在线播放| 国产最新自拍网站| 偷窥目拍性综合图区| 日本免费A级毛一片一时看片| japanese国产永久免费视频| 亚洲免费二区中文| 国产精品永久免费| 亚洲Av有码| 最爽最刺激的十八视频| 精品国产另类AⅤ一区二区| 最新AV先锋网址| 永久免费的拍拍拍网站| 中文字幕肉感巨大的乳专区| 美熟女A级作爱大片免费观看| 国产公开免费人成视频观看| 国产无遮挡又黄又大免费视频| 成年人免费观看区| 日韩AV网站在线观看| 加勒比不卡AV| 在线观看色综合| 大波美女免费做受视频| 亚洲色大成网站永久一区二区 | 国产乱码一二三区四区| h动漫无遮挡在线看中文| 蝌蚪视频在线国产| 131美女图片爱做视频| 国产精品美女白浆喷水| 亚洲成版人网站| 精品国产h| 作爱视频网站久久| 黑森林AV网站| 午夜男女插插福利视频| 亚洲欧美自拍另类制服丝袜| 变态拳头交视频一区二区| 2019午夜三级网站理论| 日本视频日韩中文字幕| 又黄又粗又长又爽视频| AV网在线观看网站| 国产精品福利福利视| 又组硬又黄又大免费视频| 96 国产 在线| 久久99精品久久久久麻豆| 亚洲欧美人成视频在线绿茶| 18岁以下禁止进入的网站| 中文字幕乱码一区二区三区免费| 对白离婚国产乱子伦视频大全| 2022AV网在线观看| 亚洲sm另类一区二区| 国产盗摄偷窥在线观看| 性,三级国产在线| 欧美日韩一区二区三区视频播放| 国产精品视频男人的天堂| 色窝窝色蝌蚪在线视频| 视频中文 在线 日韩 亚洲| 春色 都市 亚洲 小说区| mm131美女愛做視頻| 久久人体大胆瓣开下面| 激情九月丁香婷婷| 亚洲欧美日韩h中文字幕| jk福利诱惑影视在线| 午夜精品视频自动跳转| 一本大道香蕉一区二区| 日韩有码在线不卡视频| 对白一区二区三区仑乱| 色天天天综合色天天| 中文综合在线第二页| 在线亚洲97se亚洲综合在线| 厨房掀起裙子从后面进去视频| 俄罗斯孕妇喷水一级视频| 国产在线孕妇孕交| 又爽又大又光又色的午夜视频| 少妇人影院| 同桌把我下面摸高潮视频| 久爱www免费人成播放| 成熟美女流白浆一区二区| 久久精品久久久久久齐齐| 国产特级全黄一级毛卡片| 大学生露脸无套在线视频丿| 粉嫩高中生的第一次| 国产情侣不卡自拍网| 久久国产十八禁| 国产久爱视频在线| 国产AV-肉欲| 亚洲最大网在线| 久久久久久中文字幕| 亚洲色天码专区在线着| 国产伦久视频免费观看视频| 中文无遮挡H肉视频在线观看| 国产午夜福利伦理300| 国产迷晕漂亮大学生| 国产一卡2卡三卡4卡免费| 日本xxxx在线视频,免费看| 青草99在线视频免费观看| 午夜福利视频xxxx| 日日摸日日碰日日狠狠| 强奷乱码中文字幕| 久久播免费视频| 国产在线地址一| 最好看的2019中文字幕视频| 91香蕉国产线观看免费| 好大好爽456在线观看| 久久少妇免费精品| 日韩AV波多野结衣一区二区三区| 天堂网在线最新版www中文网| 色婷婷久久综合中文久久一本| aiai永久网站在线观看| WWW九月婷婷| 日本一区二区三区精品AⅤ| 久久精品这里只有精99品麻豆| 私密保健少妇偷吃视频| 一区二区三区精品视频| 国产乱人视频在线播放| 亚洲人成伊人成综合网中文| 男女性爽大片视频免费看| 国产亚洲精品岁国产微拍精品 | 五十路熟女亚洲专区| 亚洲成a影院| 国产精品熟女高潮视频| 阳茎进去女人阳道视频特黄| 亚洲精品揄拍自拍首页一| 久久久久久免费影院| 在线视频免费观看不卡| BBw下身丰满少妇18XXXX| 国内高清久久久久久| 久久国产精品视频小说| 久久久精品少妇| 999久久免费精品国产| 日本大片免a费观看视频| 好大好多水视频| 熟女老女人的网站| 国产大胆露出在线视频| 国产老妇伦国产熟女老妇高清| 日本成本人片免费网址在线观看 | 一级免费视频网址| 久久本道久久综合伊人| 亚洲尤物精品久久| 嗯啊免费视频| 日本人又色又爽的视频| 国产精品香蕉网页在线播放| 护士被强侵犯在线播放| 十八禁网站在线观看播放| 激情婷婷丁香9月色综合| 开心婷婷四房播播网| 三上悠亚精品一区二区| 五月丁香六月狠狠爱综合| 成人亚洲爱情岛论坛在线观看| 超级碰97直线国产免费公开| 日本三级中文字幕在线五区| 野花视频www在线观看免费| 亚洲视频一二三四区| AV高潮在线免费观看| 极品盛宴91在线| 九九视频在线观看视频网站| 国产高清 在线播放 26uuu| 最乱色男女视频完整版| 国产情侣久久| 国产精品进线69影院| 中国大陆女BBWBBW| 初尝黑人嗷嗷叫中文字幕| 日本乱视频在线播放| 中文字幕精品亚洲无线码一区| 国产风韵忧存丰满大屁股| 在线手机AV 网站| 2019年国产在线不卡a| 国产精品免费AⅤ片| 精品久久久久久久久中文字幕| 天天做夜夜做狠狠做| 国产清纯91天堂在线系列| 性爱网站国产精品高清| 强壮的公么征服我让我高潮| 久久综合亚洲色hezyo综合| 国产白浆视频| A级亚洲尤物在线| 国产精品麻豆久久久| 俺去俺来也在线www色官网| 久久综合热绿巨人| chinese打屁股女视频网站免费| 92免费午夜福利1000合集| 1000部拍拍成人免费视频| 国产精品视频久久久| 五十路成熟丝袜| 国产精品360盗摄| 青青草原伊人AV网| 99久热只有精品视频免费观看| 亚洲自偷自拍另类在线播放| 综合成人亚洲网友偷自拍| 麻豆婷婷射| H肉动漫在线观看| 白丝美女被强插网站入口| 800αV色多多视频在线| 国产美女白丝喷水在线观看| 综合色在线不卡| 精品久草aV一区| 又污又爽又黄的网站免费| 免费人成在线视频播放2021| 国产亚洲h小电影| 伊人久久大香线蕉综合色狠狠| 亚洲一区二区电影视频| 野外少妇被弄到喷水在线观看| AV淘宝国产首页在线最新| 2020国产在线拍揄自揄视频| 2019亚洲va在线va天堂va国产| 紫黑粗大噗呲捣出白沫| 国产日韩一区二区高清| 午夜福利亞洲國產精品| 伊人久久综合97| 最新2021亚洲网站| 久久精品极品视觉盛宴| 亚洲国产精品500在线观看| 国产ol丝袜高跟秘书在线观看| 18女下面流水无遮盖视频| 久久亚洲道色婷婷| 在线观看国产污网站| 本站亚洲综合网伊人中文| 午夜激情福利网| 最近最新免费中文字幕大全| AV尤物蜜芽每天在线播放| 最新亚洲人成在线观看99| 亚洲日韩成人不卡网站| 一级奶水在线| 中文字幕无线码中文字幕| 久久婷婷人人澡人人爽人人喊| 37tp人体粉嫩胞高清大| 国产XX00视频在线| 中中文字幕三区| 亚洲60路视频| 久久伊人亚洲综合网| 国产精品一aV一免费| 国内大量揄拍视频| 2021aV免费看| 中文字幕无线码一区2020青青| 国产欧美久久久精品影院| 正在播放国产水嫩美女叫| 国产制服丝袜第一页| 美国6一12呦女精品| 亚洲日韩日本欧美精品网| 3344永久在线观看免费| JiZz国产大全视频免费| 亚洲人成网址在线播放a| 高清女同学大乳在线观看| 在线看片免费人国产成视频 | 国产欧美在线呦| 呦男呦女八区| 高H全肉污文play视频| 最乱色男女视频完整版| 麻豆婷婷射| 浴室小视频午夜国产一区| 国产女同在线播放| 日本三级在线播放线观看视频| 白丝袜网站在线观看| 国产在线观看杨幂| 俄罗斯孕妇喷水一级视频| 处破女轻点疼18分钟| jizz日本免费在线观看| 少妇 精品 麻豆| 亚洲国产免费男男| 高中生粉嫩美女高潮视频| 高中泑女视频网站国外| 久久HEZYO久综合亚洲色| 性XXXX欧美老妇胖老太肥婆| 日韩不卡在线尤物视频| 免费爽爽看片在线看片| 久久精品一本到日日躁| 真实国产乱子伦沙发| 东北老富婆高潮大叫对白HD| 国产亚洲精aa在线看| 一个人在线看AV| 成人 AV动漫在线观看| 俄罗斯女女破苞视频| 777米奇狠狠| 白丝国产在线| 8x免费在线观看| a欧美亚洲日韩在线观看| 国产白嫩极品在线观看| 伊人久久情人综岁的合网18| XX00美女高潮视频| 老汉Av免费入口在线观看| 在车里撞了我久久这里只有精品青草| 校草18厘米撑破内裤| 日本国产爽高清不卡| 久久久中日韩性| 春色福利导航| 国产孕妇性爱视频在线播放 | 101超级碰碰碰碰久久久久| 国产ktv交换配乱婬视频| 伊人成成综合开心网| 久久久2019中文字幕乱码| 亚洲男同GAy作爱视频网站| 色肉体在线| 亚洲女人AVAV天堂影视| 色综合日本久久综合网| 又色又爽又刺激的视频| 日本不卡不码高清免费| 德国高清性色生活片| 嗯啊不要 在线 一区二区 啊啊 不要| HEZYO加勒比波多野结衣| 午夜dj影院在线观看免费视频| AV天堂永久资源防屏蔽网址 | 国产欧美日韩一区二区三区视频| 亚洲伊人久久大香线蕉| 国产福利精品视频| 亚洲精品456在线播| a级黑粗大硬长爽猛片视频| 国产精品h在线观看尤物| 、中国精品VIDEOSSE| 成a人影片免费观看日本| aⅴ网站在线观看| 亚洲天堂欧洲| 亚a在线.a人片| 精品日本免费一区二区三区| 日韩日批在线免费播放视频| 强行扒开双腿疯狂进出动态图视频| 一本久道久久综合丁香五月影院官网版| vr在线播放免费人成视频在线观看| 床震摸胸视频免费观看| 亚洲AⅤ国产AV综合Av| 天堂免费在线观看骚虎视频| 亚洲动漫偷拍另类校园| 国产高潮在线播放| 日批视频在线看| 国产一二三社区不卡| 紧身裙女教师 波多野结衣在线| 国产人成高清视频| 一级特黄毛一片| 国产精品日韩AV一区二区三区| 2012中文字幕高清在线中文字幕日本| 中文精品久久久久国| 苍井空一区二区| 2019亚洲免费网站观看视频 | 777色在色在线播放免费| 亚洲红杏成在人免费在线观看| YW19成人免费视频播放| 中文字幕制服丝袜第57页| 粗大猛烈进出偷拍高潮视频| 久久久久久久综合综合狠狠| 日韩在线看片免费人成视频播放| 超97免费视频在线观看| 精品福利网址导航在线观看 | 国xxxxx在线免费播放| 二区三区不卡不卡视频| BBW撒尿大全| 天天拍夜夜添久久精品大| 成人啪精品视频网站午夜| 国产精品美女冒白浆| 久久国产精品嫖妓| 国内精品影院久久久| 5566视频资源| 久久69精品久久久久久hb| 亚洲码在线观看| 国产-第1页-草草影院CCYY| 天堂69亚洲精品中文字幕| 高HAV在线免费看| 色城视频在线观看| 国产日韩欧美久久久精品图片| 亚洲h成年动漫在线观看不卡| 午夜影院打几把操| 国产级在线看免费观品善网| 日本成熟少妇喷浆视频| 337p亚洲日本欧洲大胆| 亚洲欧美人成网站在线观看看| 日本肉彩漫h肉在线免费观看| 亚洲很黄免费视频| 大又粗又爽又黄少妇视频观看| 影音先锋色AV男人资源网| 777午夜精品在线影院| 天堂网在线WWW在线资源| 国产大全香蕉精品在线网址| 中文字幕久热精品视频在线| 日本高清不卡码| 偏僻农村大乱纶| 欧美99欧美久久| 另类 专区 欧美 制服丝袜| 在线观看亚洲综合网上| 色多多成视频| 亚洲欧洲日产国码综合在线 | 好妈妈1免费观看中字直播| 国产在线视频不| 网禁国产艹you女| 亚洲欧美色另类综合| 欧美三级韩国三级日本三斤| 人前露出精品视频国产| 国产精品调教打屁股在线播放| 亚洲Aⅴ一区二区尤物视频| 欧美又粗又大一进一出| 影音先锋网站尤物影音| 一个人在线看AV| 成人性三级欧美在线观看| AV女人高潮大喷水在线看| 噜噜色,噜噜啦,噜噜网| 国产打屁股在线调教97| 成年拍拍视频| 翁公好猛好紧好硬使劲好大| A级作爱视频| 色多多免费视频精品视频在线| 国产在线观看污的| 亚洲中文视频一区二区三区| 2020久久国产精品久久| 日本苍井空免费人成视频播放| 一二三区高清视频国产女人| 亚洲无尺码视频| 亚洲日产2021高清视频在线| 太粗太硬太深了太涨了轻点视频| 国产精品性影院在线| 亚洲亚洲人成综合网站图片| 多人强伦姧孕妇免费看| 久久电影午夜福利视频| aⅴ淘宝国产在线观看| 亚洲天堂在线观看免费视频| 欧美。日韩,一区| 亚洲综合小说区图片| 91大神在线观免费观看| 另类亚洲其他中文另类| 久久精品福利电影| 刺激性视频网站| 亚洲国产呦萝小初| www.999精品视频| 麻豆国产AV精选| 野花视频在线观看| 亚洲无线码一区二区三区| 自拍偷拍 一区二区三区| 久久精品免费一区二区| 亚洲一卡2卡3卡4卡乱码| 久久国产精品第一页| 多多影院午夜在线| 伊人大杳焦在中文字幕| 国产在线aⅴ精品| 亚洲人成伊人成综合网小说 | 97超频在线视频免费观看| 国产女人水真多| 婷婷久久综合| 午夜影视在线观看免费| 韩国床震无遮挡激情高潮| 亚洲老少妇乱亚洲乱妇| 自拍欧美日韩亚洲动漫| 亚洲色大成影网站www永久| 一二三区四区无产不卡| 5566视频资源| 伊人色AV| 中文字幕aⅴ一区| 激情福利视频网址| 中文字幕乱换在线| 日本少妇寂寞少妇aaa| 99久免费精品视频在线观看| 国产揄拍视频在线观看激情五月| 国产日产欧产精品精品| 中文AⅤ在线一区| 最新亚洲AV日韩AV一区二区三| 在线观看国产精品v| 国产欧美日韩手机在线不卡| 女人私密部位流白浆视频| 国产自国产一二三区| 国产精品久久一级c片| 黑人欧美又大的又粗| 久久亚洲中文字幕精品一区 | 亚洲激情欧美激情| 色吊丝永久性观看网站| 真实小呦you女网站| 久久精品国产亚洲AⅤ| 又大又黄又粗美女网站| 亚洲а∨天堂2020在线网站| 久久国内精品自在自线400部| 又爽又黄又无遮掩的免费网站| yw尤物国产在线播放| 69久久国产精品视频| www视频免费| 99国产亚洲精品美女久久久久| 高清视频_欧美人与动欧交视频| 97电影院中文字幕| 69视频激情一个人| AA级九九视频| 尤物在线国产视频观看| YW19 CAN国产在线观| 日韩在线看片免费人成视频播放| 国内少妇偷人精品免费| 国产在线精品国偷产拍| 亚洲性爱一区| 亚洲美女视频之日韩精品| 被弄的下面一直喷水视频| IGAO视频国产精品不卡| 亚洲国产V高清在线观看| 国产精品思思五月婷高清在线 | 国产日韩另类中字| 一区二区三区少妇| 久久精品国产一区二区三| 东北白嫩少妇不戴套| 国产xxxx69真实实拍| 粗大猛烈进出高潮免费看| 中国一级特黄大片免色| 2020国自产拍精品网站| 日日摸日日碰夜夜爽亚洲综合| 国产欧美亚洲精品a| SAO虎高清视频在线网址| 日韩AV动态图片| 五月婷哼亚洲激情综合网| 131美女爱做视频午夜免费| 久操线在视频在线观看| 国产在线正在播放| 亚洲喷水专区| 好涨好硬好爽免费视频| 最近中文字幕页| 久久精品国产在热亚洲直播| 欧美中出一区二区| 狠狠pa免费视频| 亚洲最大网在线| yyhuan111111少妇影院在线| 亚洲手机在线观看看片| 久久动态图| 抽搐一进一出真人免费好痛别插了| 色吊丝永久性观看网站| 高清不码二区三区| 欧美A∨小影院| 国产中文字幕乱码2021| a一级农村国产片| 性色AV网站在线观看| 亚洲同人专区| VIDEOS另类德国重口另类一| 杨幂激战黑人久久影院| 国产美女遭强高潮网站下载| gv男女在线播放| 在线观看国产精品v| 尤物在线观看不卡| 伊大人香蕉综合在线视频LD| G0G0日本肉体艺术激情| AV天堂最新版www| AV色精品在线看| 成年人电影网成年人片| 国产AV丝袜美腿丝袜| 日韩欧美亚洲一区SWAG| 色综合琪琪香蕉在线播放| 嗯啊视频在线少妇| xxxx明星性爱视频| 日本无遮羞肉体动漫在线影院| 精品1区1区3区4区产品乱码区| 国产高潮白浆| 污视频无遮挡| 亚洲第一在线无线吗| 2020天天弄亚洲系列中文字幕制服| 很刺激很黄的小视频在线看| 24小时在线观看a级片| 成 人 亚洲 综合天堂| 中日韩国极品内精品视频| 极品国产AV| 日韩不卡AV一区三区| yy111111妇女影院| 亚洲熟女俱乐部| 国产精品h尤物在线观看| 凹凸午夜福利| 亚洲h成年动漫在线观看尤物 | 亚洲中文字幕日产乱码在线| 一区二区AV电影| 最新午夜福利在线观看网| 华人少妇被黑人粗大的猛烈进| 中文字永久区乱码2021| 久久国产精品偷777米奇四色| 狠狠操理论| 经典三级一区国产二区| 杨幂喷水高潮在线观看视频| 久久青青草原精品国| 很黄的十八禁网站| 中文字幕区一超清中文乱码字幕在线观看 | 精品久久杨幂国产杨幂| 粗大猛烈进出高潮的视频| 亚洲本子,Av| 午夜免费福利爽爽羞羞视频| 亚洲日韩电影网天堂| 久久99精品国产麻豆| 国产交换配乱婬视频蜜臀| AVtt手机版天堂网国产| 久久波多野AV| 五月天婷婷亚洲综合成人| 国产又黄又粗又色| 久人人爽人人爽人人片AV| 中文字幕一二三区不卡2021| 国内自拍真实伦在线视频| 东北老熟女45分钟| 国产巨作最新丝袜秘书在线| 老司机精品成影院18在线| a级黑粗大硬长爽猛出猛进 | 日本XXXXX护士18| 国产下药迷倒白嫩美女观看| 日本免费高清一二三区| 国产午夜人做人免费视频中文| 中文字幕在线手机播放| 大码熟女视频免费| 2017AV天堂网在线播放| 国产精品免费午夜在线a| 国产高清无套在线观看| 国产美女口交免费视频| 午夜亚洲国产理论片中文飘花| 杨幂国产精品| 真人做受120分钟小视频| 国产乱对白刺激视频| AV手机天堂在线| 在线观看国产精品一区二区| 公么大龟弄得我好舒服AV| 成年网站在线观看播放| 精品国产yw在线观看| 最新免费高清不卡中文字幕手机在线观看 | 久久久久a v| 伊人久久五月天影院| 久久精品国产在热亚洲直播| AV天堂免费网址| 性情网站在线观看免费| 综合久久综合久久丝袜脚射精| 女人色极品影院| 欧美视频无砖专区一中文字目| 兔女郎被啪出水在线视频| 国内精品一区二区芒果视频在线观看| 2022国产区在线| 2019天天狠狠| 2021国产视频| 国产天堂网| 成年片天天看免费高清视频| GREENBED| 国产免费高清视频青女在线| 又黄又长又大网站| 亚洲成年女人大片| 国产强伦姧在线观看| 白丝jk国产一区二区三区| 嗯~啊~好大啊~视频在线看| 尤物视频66| 本道综合精品久久伊人| 白洁高义国产精品视频| 老司机精品线观看视频首页| 俄罗斯一级aV免费观看| 亚洲人成色77777在线观看| 尤物一进一出动态图| 一个人在线观看免费视频www| 999热在线精品视频| 中文综合在线第二页 | 公共厕所www日本撒尿视频| ijzzijzz精的女人美女| 亚洲欧美日韩精品另类| 亚洲处破女 www| 999精选视频| 在线国产视频有码字幕| 国产女人爽的流水的视频| 午夜激情电影免费在线观看| 在线播放少妇被高潮不断| freexxxx性第一次摘花| 黑人粗大猛烈进出视频| 国产精品一区手机在线观看| 啦啦啦啦视频资源免费观看| 国产在线jyzzjyzz免费护士| 中文字幕有码不卡在线观看| 在线看片免费18| 十八禁AV美女网站| 精品欧美激情精品一区| 国产午夜福利诱惑在线观看| 又大又粗又黑又硬免费视频| 69堂网址在线影院| 91久久国产综合精品女同| 自拍偷在线精品自拍偷| 激情综合婷婷丁香五月尤物| 又粗又黄的视频| 先锋色资源在线视频| 精品 日韩 国产 欧美 视频| 无尽欧美杂交性视频| 粗 大 爽 水视频| 综合图区亚洲欧美另类图片| 白浆喷水在线| 九九热爱视频精品视频| 国产射里面吞精高潮在线播放| 97久久综合亚洲色hezyo| 日本视频日韩中文字幕| 国产呦玩系列(772)| sm无遮挡免费看| AV淘宝国产首页在线观看| 999视频有精品视频在线| 97porm国内自拍视频| 亚洲免费人成视频观看| 亚洲视频在线观看高h| 中日韩一区二区三区中文免费视频| 少妇一区二区三区黄| 久久网站亚蕉| 色窝窝色蝌蚪在线视频| 一区二区三区熟女| 日本网站在线免费看不卡| 好紧好湿好爽好硬视频| 嗯啊免费视频| 中文免费乱理伦片在线观看2018| 高H视频在线看| 国产精品香蕉网页在线播放| 久艹一区二区在线观看| h黄在线观看免费视频| 久久推油短篇| 国内在线网友露脸自拍| 黑人两根一起强进免费视频| 丰满少妇被猛烈进入高淸播放| 最近手机中文字幕大全| 亚洲午夜影院一二三四不卡| 亚洲综合日韩精品一区| 久久久不卡中文字幕| 久久国产精品无| 用力…深点灬用力在线视频 | 婷婷六月激情| 五月天少妇手机免播放| 欧美nu精品一区二区三区四区| 国产丰满大乳奶水在线播放| 亚洲精品人妖| 中文字幕一区亚洲高清| 在线∨片免费观看视频| 阿娇13分钟作爱在线观看| 理论喷水视频| 国产边电话边| 无套美女在线| 我与公么激情性完整视频 | 国产制服丝袜第一页| 狠狠综合久久久久综合网| 亚州五十路伊人网| 极品国产主播粉嫩在线| 最近最新中文字幕h| 国产00在线观看| 天天AV天天翅天天谅先网国产| 很黄又刺激免费的视频| AV大片在线观看| 在线看黄AV免费安全| 日本午夜福利在线观看| 热久久国产最新地址获取| 最新深夜男女福利片视频| 手机能看的AV在线网站| 丰满的女同学2| 国产欧美成aⅴ人高清| 色天堂最新网址| A人片在线看| AⅤ激情视频| 阳茎进去女人阳道3d视频| 午夜亚洲国产理论片中文飘花 | 成年女人免费久久| 亚洲色大成网站www在线观看| 被弄到高潮在线观看| 日韩亚洲高清一区二区| 尤物最新网站永不走丢| 女女互慰高潮抽搐视频| 中文字幕日韩一区二区不卡| 午夜福利视频1| AV淘宝国产在线观看| 6080YY理论三级在线看视频| 国产精品午夜理论片| 尤物天堂亚洲精品网| 粉嫩的竟然没有一根毛激情| 国产美女自卫慰水免费视频| 少妇111111影院| 2021AV免费| 狠狠久久久| sm极度另类视频| 丝袜国偷自产中文字幕| 日本不无在线一区二区三区| 69天堂在线视频| 最爽网址在线观看| 亚洲精品综合第一国产综合| 伊人久久大香线蕉综合网| 国产无遮挡免费视频| 在线播放白浆四溢| 老司机视频网站| 亚洲国产精品一区二区三区久久| 香港三级理论在线观看| 调教女m网站视频| 日本WWWXXXX在线观看| 日本中文字幕亚洲乱码| 18成禁人视频免费网站| 阿v电影天堂网电影天堂在线| 亚洲伊人久久大香线蕉综合| 无福利一区二区三区| 亚洲欧洲视频一二三区| 男子狂桶美女白浆高潮爽| 操Av爽久| 成 人 网 站 免费 在线| 大胆人休久久久大胆的做受| 亚洲欧美在线人成大黄瓜| 丰满大乳奶水在线播放| 国产在线悠悠视频| 久久五月丁香合缴情网| 亚洲真正中出在线观看| 国产大全国内精品专区第一页| 国产电击在线观看| 波多野结AV系列一区二区| GAY日本男男GV片在线观看| 97高清国语自产拍资源| 亚洲成a∨人片在线播放| 亚洲激情欧美激情| 亚洲电影国产一区二区三区| 亚洲射区中文字幕| 国产免费污污网站| 老司机亚洲精品影院在线下载 | 国产真实露脸乱子伦| 捆绑白丝jk震动捧娇喘视| 国产蝌蚪视频一区二区| 美女精品午夜福利视频| h片免费观看在线大全| 亚洲性爱视频网站| 日日摸夜夜添夜夜添国产91| 欧美play一区二区在线观看| wwweee免费观看视频| 色秀视频在线观看网站| 精品国语任你躁在线播放| 草莓视频免费在线观看| 免费看男女做好爽好硬视频| 69堂精品aⅴ| WW久久综合久中文字幕| 99护士自拍高潮在线| FREEEⅩXX性欧美HD| 中国女人69XXXX免费| 欧美在线高清视频一区| 中文字幕 第三页 先锋影音| 国产极品24p| 国产福利在线电影| 最新AV女人的天堂| 久久久不卡中文字幕| 亚洲aⅴ天堂宅男| 成人Aⅴ免费视频在线观看| 国产女人高潮叫床视频| 亚洲Av日韩高潮| 在线a亚洲视频~在线a视频网站| 久久夜夜香| jjzz日本在线看| 青青草原视频在线观看网站| 丁香激情婷婷| 啊v视频免费在线| 国产精品久久这里只有精品| H精品视频在线观看不卡| 免费20分钟超爽视频| 国产色多多在线| 国产又黄又爽又色在线观看视频| 亚洲天堂网在线观看| 亚洲第一区第二区| 国产精品农村妇女α片| 女女磨豆腐视频| 一区二区三区精品道| 又黄又爽又猛的视频| 日韩精品簧片| 亚洲青草| a v 天堂手机在线观看| 欧美成 人网站 免费| 成 人 色综合 综合网站| 国产农村一级看片| 尤物在线视频免费国产| 男女猛烈无遮激烈太紧动| 被黑人连续中出视频| 嗯…啊摸湿内裤动视频| 另类小说色综合网站| 性xxxx18免费观看视频| 亚洲 日韩 熟女 色| 杨幂国产在线观看| 久久亚洲精品日韩| 亚欧美丝袜另类聚合| 国产尤物亚洲精品不卡| 91极品反差婊在线观看| 2021中文字幕入口网站| 久久99日韩国产精品久久99| 国内视频二区不卡| 亚洲综合一本色一区| 亚洲Av曰韩精品久久久久| 欧洲美女与动ZOOZ| 黑人越猛烈欧美XX00动态图 | 大学生无套带白浆嗯呢啊视频| 不卡高清AV手机在线观看| 午夜免费啪视频在线观看| wwwyw国产在线视频| 好大好BBB爽办公免费视频 | 9re久精品视频在线观看| 好爽好紧大伊人久久| 国产午夜福利红一片| 韩国AV免费在线观看| 天天综合天天做天天爱| 日本妇人成熟A做片| 视频一区二区日韩中字久久| AV在线网页大全| 伊人五月天影视| 成人免费午夜A大片| 国产激情视频盗摄全集| www免费视频| 中文字幕乱码亚洲∧V日本| 久久精品国产亚洲7777| 国产片午夜福利| 国产剧情精品aⅴ| 一本大道久久精品| 亚洲天堂网站| 国产冒白浆视频| 国产农民工嫖妓老女人| 作爱全过程无遮挡| 国产精品视频yjizz| 色精品国产米奇777| 一本到高清视频dvd| 国产真实交换免视频| 国产ML在线播放| 丰满五十老女人性视频| 国产性爱合集| 亚洲男同免费播放网站| 天天做天天爱天天爽| 尾随入室强奷在线播放| 国产男男制服AV在线| 中文字幕在第二页观看| 在线视频制服丝袜美腿| 2021中文字幕永久免费| 亚洲精品制服丝袜四区| 伊人久久大香线蕉综合网| 性爱视频国产原创| 日本成年H动漫网站| 国语对白国产乱子伦视频大全| 中国人体一区二区| 亚洲射区中文字幕| 又爽又黄免费的视频| 久久中文字幕系列| 亚洲五月天在线观看| 激情综合婷婷丁香五月蜜桃| 久久综合久久美利坚合众国| 精品国产经典三级在线观看 | 香港三级澳门三级人妇| 国产精品va在线播放| 黄H免费在线观看免费在线观看| 亚洲欧美日韩一区| 在线午夜视频网| 午夜视频男人的天堂| 加勒比一区| BAOYU131永久免费视频| 对白离婚国产乱子伦视频大全| 99精品国产99久久| 欧美推油| 狂野欧美精品AⅤ| 尤物国产免费| 欧美日韩一区二区免费在线观看| 亚洲欧洲中文高清| 阿嗯疼啊午夜视频| 中文字幕第一页中文专区5| 国产AV丝袜美腿丝袜| 刘亦菲一区二区在线| Chinese国产女同| 成年女人免费播放专区| japanese高潮尖叫| 亚洲欧洲日产国码久在线| 风间由美性色一区二区三区| 污网站在线观看Gif| 情侣作爱视频免费观看网址| 亚洲性爱视频网站| 亚洲一成人高清一区二区三区| 国产美女跪下吞精| Japanese熟女娱乐部| 漂亮少妇被修空调侵犯在线| 国产曰又深又千爽免费视频| 粉嫩虎白女p的视频| 国产精品私拍视频| 国产区精品一区二区三区| 老狼在线一区二区观看| GOGO全球大胆高清luo模在线电影免费视频| 伊人久久未满| 亚洲第一视角不卡高清在线 | 欧美日韩亚洲乱国产综合aⅴ| ww亚洲ww亚在线观看| 高潮娇喘喷水在线观看| 2019天天躁夜夜躁狠狠| 污网址免费观看| 永久AV在线| 成 人动漫a v 免费观看| 欧美性爱一区| MM1313亚洲国产精品收藏2020| 热热久久狠狠偷偷色男同| 福利精品在线看| 日韩AV在线网址观看| 你懂的国产日韩欧美在线| 中年熟女网址| 被黑人巨大进入经历| 日本精品不卡免费| 国产国产人免费人成免费视频| 悠悠色就色综合偷拍区| 粉嫩 白浆 熟女| 永久免费AV在线影院| 波多野结衣20p_亚洲色| 国产良妇出轨视频在线| 中文字幕无线观看高清| AV手机在线天堂在线| 99热这里只有精品免费播放| 亚洲国产天堂久久综合226114| 午夜久久久久| 午夜大片免费男女爽爽影院| Av天堂亚洲好男人| 亚洲女人天堂| 777免费人成影院| 国产亚洲日韩在线人成| 好男人社区在线www视频| 国产午夜福利诱惑在线观看| 中午字幕有码系列| а∨天堂一区中文字幕| 在线观看精品国产| 亚洲天天做天天去天天添| 超级碰碰碰碰免费视频不卡| 极品少妇高潮试看| 亚洲中文字幕一二三四区小说| 日本aⅴ精品中文字幕| 亚洲成AV人在线观看橙子| XXXXX大片在线观看| 国产精品,校园激情| 亚洲国产二区| 亚洲作爱图欧美网站| 2019国产品在线视频| 野花视频免费观看高清在线观看 | 最爽男女激烈动态图| H漫大全视频在线观看不卡| 少妇高潮惨叫喷水正在播放| 久久伊人尤物| 久久综合国产乱子伦精品免费| 精品亚洲人人| 亚洲六月婷婷激情| 多水的粉嫩小穴视频| 成人免费AV不卡在线观看| 伊人久久福利中文字幕| 中年熟女按摩spa偷拍视频牛 | 一级风流片A级在线| 久久精?色另类小说| 无遮挡激情视频国产在线观看| 亚洲人成高清| 亚洲成a人片www| 亚洲精品国偷自产在线99人热| 国产日产久久高清| 妺妺窝人体色www在线图片| 久久性爱视频| 国产ol丝袜高跟秘书在线观看| 9cao在线播放精品日韩| 性XXXX毛茸茸的无尽| 久久久综合结合狠狠狠97色| 百花久久东京综合| 日日摸夜夜添狠狠添应用| 在线观看精品视频a| 国产精品青草久久久| 国产特黄a三级三级三级| 高清男人的天堂网址大全| AA级女人大片免费观看视频| 理论片福利片在线观看欧美| 一区二区理伦视频| 波多野结衣好大好紧好爽| 天天摸天天做天天爽_| 新亚洲综合菊1| 99re66在线精品免费观看| xxxxx在线免费观看| 久久人人爽爽人人片aV| 精品少妇456在线看| wwwww亚洲高清| 又黄又刺激又粗又硬又大视频| 亚洲精品国产精品成人不卡| 国产大胸露脸在线播放| 欧美粗大猛烈18p图| 成人性欧美丨区二区三区| 狠狠地综合| 男生把j桶进女的屁股里视频 | 高挑美女被遭强高潮视频| 国产精品亚洲哟女| 波多野结衣亚洲一区| 国产热综合热AV| 在线人成视频播放午夜福利| jizz大全日本护士| 老子影院午夜伦不卡观看| 无套带白浆嗯呢啊污| 久久久亚洲精品杨幂| 午夜激情福利电影网| h片在线免费观看| 超级碰碰青草免费视频| 亚洲爱婷婷色婷婷丁香五月| 女人被狂躁到高潮视频免费| 亚洲杨幂中文字幕| AV男人的天堂在线观看第三区| 色 人 阁阁婷婷色五月破解| 国产无套乱子伦精彩是白视频| 翁公和在厨房猛烈进行出| 色窝综合网| 草美女视频在线观看| Gay在线一区| 男吃女下面玩高潮视频| 99精品网站| 粉嫩美女XX视频在线观看| 少妇AV网| 性生大片免费观看性| 性爽爽午夜福利刺激视频| 一级国产婬片| 真实男女XX00动态视频午夜| 欧美白人最猛性xxxxx| 亚洲色大成网站WWW永久网站| 国产精品亚洲AⅤ片| 国产女做a精品免费视频| 伊仁国产免费Av| 日本福利导航视频| 白丝jk插进去喷水视频| 欧美人禽杂交狂配视频| 床震未满十八禁止观看免| 91免费精品高清a| 国产自产2021最新麻豆| 婷婷AV网| 国产理论一区二区三区| 黄文一区免费| 性欧美欧美巨大69| 日本一区二区三区综合在线视频 | 亚洲欧美日韩V在线播放| 偷拍精品视频一区二区三区| 视频一区在线2022| 国产亚洲欧美一区二区三区| 青青青在线视频免费观看| 国产日比视频| 太大太粗好爽受不了视频| 中国大陆女BBWBBW| 悠悠AV综合网站| 2022在线免费观看成年视频网站| 狼人色香| 亚洲免费一区二区三区超清| 国产在线精品国自产拍影院| 国产欧美日韩一区二区杨幂 | 18末年禁止进入免费网站| 久久精品伊人一区二区三区| 国产日韩精品欧美一区喷水| 欧美精品视频一区二区三区| 私密保健少妇偷吃视频| 99v久久综合狠狠综合久久| 亚欧成年人影院| 就要鲁就要鲁夜夜爽| 日本中文鲁啊鲁在线播放 | AV天堂一区二区三区| 精品亚洲人人| 亚洲一区在线观看红杏| A在线观看观看网址| 不卡成本人片在线观看| 天天日天天射天天舔| 波多野结衣视频区免费| 新婚少妇无套内谢国语播放,| 午夜福利网址| 999久久久免费精品国产| 色又黄又刺激免费视频| 校花喂我乳我脱她胸罩图片| 女邻居夹得好紧在线视频| 久久精品国产亚洲大片| 性感美女午夜福利免费网站| 百合AV一区二区| 国产亚洲精品线观看动态图| MM1313亚洲国产精品收藏2020 | 亚洲大成色WWW永久网址| 波多野结衣一区二区三区免费视频| 制服丝袜日韩另类| 99精品视频在线观看婷婷| 好了AV在线第四综合网站| 国产AV剧情遭闺蜜嫉妒陷害| 俄罗斯毛毛xxxx喷水| 国产无套乱子伦精彩是白视频在线收看| 国产一区二区三区免费精品| 国产白浆视频在线| jyzzjyzzjyzz精品| 国产精品农村妇女α片| 华人欧美国产在线精品| 性生大片免费观看性| 国产97视频人人做人人爱| 久久女人天堂| 国产在线观看丝袜视频| 一区二区三区AV| 精品一区二区三区| 国产乱婬视频| 亚洲 日韩 欧美 综合 热小说| 50老熟女导航| 黑巨茎大战欧美| 自拍肉在线观看| 免费视频网站嗯啊轻点动漫| 国产AV漂亮女主播| 亚洲国产肉丝袜美腿AV| 韩国真人无遮羞在线观看视频 | 伊人久久成综合久久影院| 精品久久久噜噜噜久久| 成a人片在线视频观看| 在线看片aⅴ免费观看| 一色屋精品视频在线观看| 分一二三四区中文字永久幕| 视频一区视频二区淫秽视频| AV香蕉网站| 国产亚洲综合久久系列抖音| 国产小屁孩cao大人在线播放| 亚洲视频高清不卡在线观看| 国产大屁股AV在线播放| 被水电工侵犯系列AV| 日本无遮羞肉体动漫在线影院| 亚洲精品国产精品成人不卡| 看片18在线免费| 久久国产亚洲精品美女久久久久| 丁香五月缴情综合网| 亚洲按摩在线看| 亚洲欧美日韩愉拍自拍| 亚洲美女网站www在线| 另类亚洲其他中文另类| 一色屋精品视频在线观看| 日韩精品视频| 尤物在线视频yw193国产| 波多野结衣被操在线| igao激情视频| 大胆欧美性爱16pBBBBBBXXXXX| 久久这里只有精品最新6| 亚洲午夜久久久久久噜噜噜| 孕妇流白浆喷水视频| 在线观看免费国产v视频| 57pao强力打造高清免费| 护士一级吞精高潮视频| 色妞窝在线视频| 国产精品亚洲专区一区| 午夜福利在线啊啊啊啊不要 | 你懂的在线免费视| 777尤物精选在线观看| 国产欧美国产综合每日更新| 久青草国产在线视频续集| 国产剧情丰满闺蜜| 五月天狠狠鲁视频| 在线看片免费人成视va| 2020天天色| 国产成 人 综合 亚洲欧美| 亚洲国产综合精品2020| 又黄又湿又爽的视频| 色综合A怡红院怡红院| 久久99精品久久久久久齐齐百度 | 偷窥 亚洲 另类 图片 熟女| 1000部拍拍拍18勿入福利视频| 又色又爽又刺激的高潮视频| 乱肉艳妇熟女免费视频| 强行扒开双腿疯狂进出动态图视频 | 亚洲欧美中文日韩v日本| 波多野结衣性爱网站| 少妇喷白浆视频在线观看| 亚洲伊人一本大道中文字幕| 678五月丁香在线亚洲综合网| 黑人巨大巨粗在线观看| 十八禁网站在线国产| 亚洲A∨夜夜欢一区二区| 国产富婆一区二区三区| 他的舌头弄得我欲仙欲死| 成本人动漫视频在线看18| 伊人久久大香线蕉动态视频| 韩国三级大全久久网站| 亚洲欧美国产国产综合一区| 国产亚洲日韩欧美一区二区三区| 国产丝袜人妖cd品茹| 亚洲成年美女一二三区免费看| 亚洲综合极品嫩模喷大量白浆| 国产在线八区| 91亚洲国产三上悠亚在线| 小浪货腿打开水真多真紧| 国产大全j野草社区在线视频观看 国产精品青青青高清在线 | 国产亚洲日韩中文字幕| jizzjizz中国18大学生| 肉欲色区一区二区| 影音先锋男人男人资源站| 亚洲天堂2014| 女人被爽到高潮视频免费| AV手机在线网站| 动漫AV在线麻豆| 在线看片免费18| 成人aⅴ国产在线| 91碰在线视频盛宴| 久久精品人人爽人人爽| 头埋入双腿之间被吸到高潮| 欧美少妇做受| ww555kkk欧美精品| 18成网址在线观看| 久久a网| 欧美日韩视频777888| 制服丝袜另类专区制服| 国产色哟哟| 日本精品久久久久久中文字幕| 又大又爽又粗免费视频| 成人免费网址在线观看不卡| 午夜理论蜜臀| 亚洲日本韩国精品αV| 国产无套粉嫩在线观看| 午夜中文字幕屏蔽| 国内自拍视频一区二区三区| 你懂得网址在线视频| 精品高清私拍在线视频| 俺去啦电影网不卡在线观看| 韩国AV免费在线观看| 视频中文 在线 日韩 亚洲| 99久久亚洲| 激情在线影院不卡| 亚洲欧美大片一区二区三区| AV国语一区二区三区| 在线点播亚洲日韩国产欧美| 日日摸夜夜添夜夜添国产91| 俄罗斯雏妓的bbb孩交| 性做久久久久久| 天堂网在线视频发布| jk福利视频一区二区| 日本少妇被黑人xxxxx| 男女嘿咻嘿咻X0X0视频| 亚洲日韩色在线影院性色| 国产精品白丝喷水jk娇喘视频| chinese打屁股女视频网站免费| 久久久视五月天视频| 老师掀开短裙让我挺进| 小屁孩cao大人图片| 亚洲尤物193yw最新地址共5项| 国产丰满白嫩大屁股ass| 国产交换配偶在线视频| 亚洲中文字幕A∨在线亚| 18女下部被啪到流水视频| 又爽又刺激无遮挡的免费视频| 舔下面喷水视频| 国产高潮娇喘免费网站| 人人爽天天狠狠| Av在线鲁丝片一区二区三区| 还有您懂得的在线免费播放观看视频。| 18成禁人看免费无遮挡动态图| 伊人AV天堂| 婷婷综合缴情亚洲狠狠小说| 制服丝袜视频国产一区| 在线观看AV网站永久能播放的| 国产精品夜间视频香蕉| 亚洲欧美日韩国产麻豆| 女人张腿让男桶免费视频| 小h片资源免费观看在线| bt天堂网www在线网| 97在线观看视频免费高清| 538国产精品小视频| 好大好湿好硬顶到了视频| 亚洲丰满多毛的大隂户| 久久精品国产中国久久| 狼人视频在线观看高清www色| 波多野结衣办公室33分钟激情| h成年动漫在线观看网址免费| 2019亚洲va在线va天堂va国产| 福利片免费 亚洲| 国产高清视频在线观看69| 丁香五月天享婷婷激情| 2021亚洲色中文字幕在线| 久久青青草原国产免费不卡| 日本黄污视频| 男人的j桶女人免费网站| 阿片免费在线视频网站| 户外露出视频第一区| 久久99热人人噜| soe-224一区二区三区在线| 国产精品一区二区AV| 国产福利小视频在线观看| 久久精品国产门事件| 女人的高潮xx超黄免费视频| 99re动漫视频| 扒开美女的下面喷潮视频| 成人夜晚爱做免费观看| 日韩一级欧美一级作爱片| 在线视频国产另类2022| 天海翼激烈高潮到腰振不止| 激情综合色婷婷丁香| 好爽好大国产视频| 天堂网www在线中文字幕| 亚洲中文字幕久在线| 欧美又粗又大免费视:| H另类在线不卡免费播放视频网站 欧美性爱免费男人视频 | 久久久直播三级| 中文字幕禁忌乱偷在线| 在线视频提供日本高清视频在线一本视频 | 天天爱天天做天天爽2021| 男人把女人桶到喷白浆的视频| 亚洲人护士毛茸茸| 成年人在线观看| 湿啊午夜视频| 18勿进国产AV| 在线∨片免费观看视频| 午夜热门精品一区二区| baoyu永久免费视频网站| 国产又色又爽又黄的视频首页| 天天狠天天透天干天天怕| 2022AV欧美精品| ckplayer男人资源在线| 啊,太大了,受不了视频欧美动态图| 国产男人桶女人| 夜夜香夜夜摸| 成人免费VA视频综合网| 一本色道DVD| 成 人 黄 色 网 站 视频香蕉| 亚洲色一区二区三区| 思思久久精品| 台湾AV国片精品女同性| spank视频国产网站在线观看| 亚洲女人的天堂白慰| gogo亚洲肉体艺术欣赏图片| 国产一区桃花AV| 大香蕉网视频免费| 亚洲成a×人片在线观看| 天天夜夜的啪2018| 国产精品女人的天堂| 永久免费的AV手机在线看| 成视人a免费观看 视频| 在线国产中出| 欧美色宅男午夜电影| 国产孕妇福利1在线观看| 国产偷自交换校园激情| 国产白浆四溢| 国产乱子伦| 调教済み変态jk扩张调教し| 正在播放变态另类zozo| 一区二区三区四区视频影院 | 久色AV| 国产精品动漫一区二区三区| 最新在线精品国自产拍视频为您推荐微拍女神极 | 超级碰碰青草免费视频APP| 91 pom 国产熟女| Chinese国产人妖网站视频| 国产高中粉嫩无套第一次| 久久综合久久美利坚合众国| 高清一区二区播放亚洲| 老熟女六十路一区| 进去粗粗硬硬紧紧的好爽在线视频| 欧美激情性爱片在线观看不卡| 床震未满十八禁止观看免| 在线免费观看你懂的| 男男无遮挡H肉真人在线观看| 久久影院一区二区h| 永久免费AV在线影院| 动漫AV在线麻豆| 白丝jk校花班长被啪视频| 韩国兔费A级作爱片在线观看| 婷婷综合之综合激情在线| 中文资源AV在线| JK白丝美女被捆绑调教视频| 亚洲成A人片在线观看的电影| 8x欧美在线视频| 在线观看亚洲十八禁网站| 进去粗粗硬硬紧紧的好爽在线视频| 26UUU色五月| 国产精品japanese| 国产女主播一区二区二| 丝袜网站免费视频国产片| 亚洲五月综合缴情在线观看| 亚洲大成综合网站7777香蕉| 国产精品裸模私密视频| 亚洲VA中文在线播放免费| 欧美老妇XXXX肥肥老太| 老司机成人午夜精品视频| 午夜福利网址| 老色鬼在线精品视频| 北条麻妃一区二区高清| 17女下面流水不遮视频| yeyecao亚洲欧美| 国产美女被遭高潮免费| 亚洲一区女教师| h成年动漫在线观看网址| 亚洲国产精品第一区二区三区| 狠狠五月激情六月丁香| 九月丁香婷婷综合激情| 在线免费日韩视频| xxxx18一19日本高清| 国产精品久久久久一区二区三区| 9丨原创国产AV剧情情欲放纵| 经典三级欧美在线播| 丁香五月开心婷婷综合缴情| 国产区精品一区二区不卡中文| 亚洲欧美高清在线精品一区二区| 国产青榴在线| 久久久久播a| 啊啊啊不要啊好爽好紧在线观看| 成年人视频网站| 国少妇xxxx00| 伊人久操| 五月天婷婷激情韩国| 久久久精品2019免费观看| 自在自线亚洲а∨天堂在线| IGAO视频天堂给爱激情| 日韩在线一区二区三区观看| 欧美色色999| 亚洲自偷自偷图片高清| 中文字幕久久综合| 91青青草原线免费下载| 不卡日韩AV导航| 尹人九九大色香蕉网站| 亚欧强奷在线播放| 在线亚洲欧美日韩精品专区 | 国内精品自线在拍精品| 国产精品一区二区在线观看99| 在线看片免费人成视频播| 2021水滴真实偷拍集锦| 悠悠AV综合网站| 粉嫩小仙女高潮出水| 永久免费人成视频网址| 国产打屁股调教在线观看| 色综合图片区| 少妇乱子伦精品区| 国产精品尤物网在线观看| 久久张柏芝| 亚洲欧美丝袜 动漫专区| 中文字幕熟女五十路中出| 午夜一级福利在线| 国产精品xvideos| 尤物A∨视频YW193| 九月色丁香婷婷| 性XXXX视频播放免费直播| 男人靠女人免费视频网站大全| 亚洲欧美午夜理论电影在线观看 | 日本韩国免费一区| www激情| yeyecao亚洲性夜夜综合久久| 好吊色永久免费播放| 超踫在线中文字幕| 亚洲国产v片在线播放观看| 亚欧国产女人天堂Av在线播放| 日本欧美一区二区三区在线播放| 各种国产黑人在线观看| 久久ww久久综合久中文字幕| 国产A在亚洲线播放| 嗯啊视频在线免费| 亚洲色大成网站www久久九九| 伊人依成久久人综合网| 在线观看人成激情视频| 国产走光合集视频一区| xxxxx做受大片18| 日本高清在线观看视频www色 | 超薄丝袜足J好爽在线| 国产福利第一导航| 一级毛卡片免费精品视频在线| 在线 欧美 中文 亚洲 精品| 69色最新在线视频| А天堂中文最新版在线官网| 肉欲在线天堂| 中文字幕高清欧美精品一区| 视频亚洲啊啊啊啊| 尤物YW193在线视频| 亚洲欧美变态另类激情一区| 亚洲欧美人成网站在线观看看| 伊人久久五月天影院| 亚洲欧美日韩高清专区-第1页| 天堂在线精品亚洲综合网| 亚洲第一影视导航| 2021微拍精品第一区| 暴力强奷在线观看视频| 久草免费在线观看| 丁香五月激情视频| 邪恶网址在线观看免费喷水|