從命令式到響應(yīng)式（三）

k00baa 發(fā)布于2019-08-23 11:39 / 1617人閱讀

摘要：它有三個(gè)方法，用來(lái)通知下一個(gè)值是什么方法在上產(chǎn)生錯(cuò)誤時(shí)通知觀察者，方法用來(lái)通知觀察者當(dāng)前流上的值已經(jīng)發(fā)射完畢。除此之外在我們不需要訂閱時(shí)，觀察者還應(yīng)該能夠安全的退出。

上次說(shuō)了響應(yīng)式中使用的設(shè)計(jì)模式，今天我們主要來(lái)看rxjs中實(shí)現(xiàn)響應(yīng)式的三大件，Observable, subject 和 Subscription;

Observable--可觀測(cè)序列

在第一節(jié)中介紹過(guò) push 類型的系統(tǒng)和 pull 類型的系統(tǒng)，它們都可以產(chǎn)生值：

	產(chǎn)生單個(gè)值	產(chǎn)生多個(gè)值
pull	function	iterator
push	promise	？

在es6中promise已經(jīng)被原生支持了，但是并沒(méi)有一種原生的方法來(lái)實(shí)現(xiàn)push系統(tǒng)中產(chǎn)生多個(gè)值，于是Observable添補(bǔ)了這一空白。

// 創(chuàng)建一個(gè)observable
const observable = Rx.Observable.create(function(observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    setTimeout(() => {
        observer.next(4);
        observer.complete();
    },1000);
});

console.log("just before subscribe");

// 通過(guò) subscribe 方法來(lái)獲取 observable 上的值
observable.subscribe({
    next: x => console.log("got value " + x),
    error: err => console.error("something wrong occurred: " + err),
    complete: () => console.log("done"),
});

console.log("just after subscribe);

這段代碼執(zhí)行后將會(huì)得到如下結(jié)果：

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

從結(jié)果可以看出通過(guò)一次訂閱我們就可以拿到一個(gè)observable上所有推送過(guò)來(lái)的值，另外請(qǐng)注意看輸出的順序，1，2，3在 after之前，而4在after之后，這說(shuō)明observable發(fā)出的值不一定都是異步或都是同步，什么時(shí)間可以取到值完全取決于以哪種方式發(fā)出。

上面代碼中還有幾個(gè)地方可能需要解釋下：

create：它實(shí)際上是Observable 的構(gòu)造函數(shù)的別名，換句話說(shuō)可以用 new Rx.Observable(...) 取代。

observer：觀察者，顧名思義，這個(gè)東西就是我們上一節(jié)講過(guò)的觀察者模式中的觀察者，這里它是由rxjs負(fù)責(zé)給我們傳遞進(jìn)來(lái)，實(shí)際上它就是我們?cè)趕ubscribe()中傳入的那個(gè)對(duì)象。它有三個(gè)方法，next用來(lái)通知下一個(gè)值是什么；error 方法在 observable 上產(chǎn)生錯(cuò)誤時(shí)通知觀察者，complete方法用來(lái)通知觀察者當(dāng)前流上的值已經(jīng)發(fā)射完畢。

subscribe: 它就是Observable類提供的方法，用來(lái)獲取可觀測(cè)序列上發(fā)出的值，接收一觀察者作為參數(shù)。當(dāng)然，上面的代碼可以寫(xiě)成:

observable.subscribe(

x => console.log("got value " + x),
err => console.error("something wrong occurred: " + err),
() => console.log("done"),

);

第一個(gè)參數(shù)處理next通知，第二個(gè)參數(shù)處理error通知，第三個(gè)參數(shù)處理complete通知，我們還可以選擇是否處理 error 通知和 complete通知，也就是說(shuō)第二，三個(gè)參數(shù)還可以省略。當(dāng)然rxjs內(nèi)部還會(huì)把我們傳入的參數(shù)處理成那個(gè)觀察者對(duì)象。

以上代碼中，我們實(shí)際已完成了observable 的創(chuàng)建（通過(guò)create），訂閱（通過(guò)subscribe），執(zhí)行（調(diào)用 next 和 complete）過(guò)程。除此之外在我們不需要訂閱時(shí)，觀察者還應(yīng)該能夠安全的退出。

subscription

這就是我們?nèi)∠嗛啎r(shí)的所要用到的東西，上面的訂閱代碼完整的寫(xiě)法應(yīng)該是：

const subscription = observable.subscribe({...});

它是我們訂閱一個(gè)observable后獲取到的，也就是subscribe方法的返回值，它上面有3個(gè)重要的方法。

unsubscribe 顧名思義，取消訂閱。

add 添加另外一個(gè)subscription。在有多個(gè)subscription時(shí)我們可以通過(guò)這個(gè)方法將它們都鏈接起來(lái)，這樣取消時(shí)只需要取消一個(gè)，而不必調(diào)用每個(gè) subscription 的unsubscribe 方法。

remove 當(dāng)然能添加必然可以移除。從當(dāng)前的 subscription 上移除另一個(gè) subscription

// 取消之前的訂閱
subscription.unsubscribe();

//重新訂閱之前我們創(chuàng)建的observable，取消訂閱時(shí)逐個(gè)調(diào)用它們的unsubscribe方法
const subscription1 = observable.subscribe({...});
const subscription2 = observable.subscribe({...});
const subscription3 = observable.subscribe({...});

//重新訂閱之前我們創(chuàng)建的observable，取消訂閱時(shí)只調(diào)用一次unsubscribe
const sub$$ = observable.subscribe({...})

.add(observable.subscribe({...}))
.add(observable.subscribe({...}));

subject

它即是observable，也是observer，所以它即可以被 subscribe 又可以通過(guò)next，error，complete發(fā)射值。下面的例子中，我們給 Subject 添加了兩個(gè)觀察者，然后給它添加一些值：

const subject = new Rx.Subject();

subject.subscribe({
    next: v => console.log("observerA: " + v)
});

subject.subscribe({
    next: v => console.log("observerB: " + v)
});

subject.next(1);
subject.next(2);

執(zhí)行后的輸出：

observerA: 1
observerB: 1
observerA: 2
observerB: 2
由于 Subject 也是一個(gè) Observer ，所以你可以把他傳遞給一個(gè) Observable 的subscribe方法：

var subject = new Rx.Subject();

subject.subscribe({
    next: v => console.log("observerA: " + v)
});

subject.subscribe({
    next: v => console.log("observerB: " + v)
});

var observable = Rx.Observable.from([1,2,3]);

observable.subscribe(subject); // 通過(guò) Subject 來(lái)訂閱這條 Observable

執(zhí)行后輸出：

observerA: 1
observerB: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

通過(guò)上面的方法，我們基本上就借助 Subject 把一個(gè)單播的 Observable 轉(zhuǎn)換成了多播的。這個(gè)示例僅僅是演示了一種將一個(gè)執(zhí)行上下文分享給多個(gè)觀察者的方法。

上面代碼中有一個(gè)from方法，它的作用就是來(lái)創(chuàng)建一個(gè)可觀測(cè)序列，類似于之前的create方法，但更加簡(jiǎn)潔，在rxjs中，它有個(gè)專門(mén)的名稱叫個(gè)操作符，通過(guò)各種各樣的操作符我們就可以實(shí)現(xiàn)可觀測(cè)序列的創(chuàng)建，以及對(duì)序列中的數(shù)據(jù)進(jìn)行各種各樣的轉(zhuǎn)換，可以說(shuō)使用rxjs時(shí)我們大部分的時(shí)候都在使用各種各樣的操作符。

GPU云服務(wù)器云服務(wù)器響應(yīng)式響應(yīng)式布局響應(yīng)式網(wǎng)站響應(yīng)式設(shè)計(jì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97263.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

k00baa

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow雙向lstm

閱讀 1200·2023-04-26 02:42
【快樂(lè)水題】495. 提莫攻擊

閱讀 1641·2021-11-12 10:36
shockhosting新加坡VPS簡(jiǎn)單測(cè)評(píng)（1Gbps帶寬）

閱讀 1804·2021-10-25 09:47
#八月優(yōu)惠#Hostodo：1核/512M/16G NVMe/3T/1Gbps/美國(guó)多機(jī)房/年付$1

閱讀 1274·2021-08-18 10:22
css 背景和漸變

閱讀 1815·2019-08-30 15:52
CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

閱讀 1225·2019-08-30 10:54
重學(xué)前端學(xué)習(xí)筆記（八）--JavaScript中的原型和類

閱讀 2642·2019-08-29 18:46
利用 es6 new.target 來(lái)對(duì)模擬抽象類

閱讀 3504·2019-08-26 18:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從命令式到響應(yīng)式（三）

相關(guān)文章

**從命令式到響應(yīng)式（一）**

javascript 函數(shù)式編程思想

響應(yīng)式設(shè)計(jì)個(gè)人的一些總結(jié)

**從命令式到響應(yīng)式（六）**

攻克前端javascript面試:什么是函數(shù)式編程？

發(fā)表評(píng)論

0條評(píng)論

k00baa

男|高級(jí)講師

TA的文章

tensorflow雙向lstm

【快樂(lè)水題】495. 提莫攻擊

shockhosting新加坡VPS簡(jiǎn)單測(cè)評(píng)（1Gbps帶寬）

#八月優(yōu)惠#Hostodo：1核/512M/16G NVMe/3T/1Gbps/美國(guó)多機(jī)房/年付$1

css 背景和漸變

CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

重學(xué)前端學(xué)習(xí)筆記（八）--JavaScript中的原型和類

利用 es6 new.target 來(lái)對(duì)模擬抽象類

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從命令式到響應(yīng)式（三）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！