異步模式之JS、Promise、RXJS

在我們的開發過程中經常會遇到一個問題：一個方法需要在另一個方法執行結束之後才開始執行。這就是我們所說的異步。

現在我們假設有兩個方法分别為fn1(),fn2();且fn2()在fn1()執行完後才開始執行。

JavaScript實作

使用setTimeout延遲2s執行fn2(),使用這種方式有個缺點是fn1()的執行時間不可控，而且如果fn2()需要fn1()的結果作為參數的話，這樣可能會導緻整個流程混亂。

fn1(callback){
setTimeout(function () {
callback();
}, 2000)
}

fn1(fn2);
           

Promise實作

Promise的特點：

1、Pormise對象隻要建立則會立即執行。

2、Promise的三種狀态Pending（執行中）、Resolved（執行成功）、Rejected（執行失敗）

3、狀态一旦改變就不會再改變了。不論在後面怎麼調用then，實際上的異步操作隻會被執行一次，多次調用沒有效果；

let fn1 = new Promise((resolve,reject)=>{
console.log("Strat Promise");
resolve();//執行成功并将pending狀态改變為resolved
//或者reject();執行失敗并将pending狀态改變為rejected
})

fn1.then((value)=>{
console.log(value);
fn2();
}).catch((error)=>{
console.log(error);
})
輸出結果：
Strat Promise
1
如果失敗則輸出：
Strat Promise
0
           

RXJS實作

首先我們在Promise的基礎之上已經發現Promise可以解決大部分異步問題了，但是如果我們想要在Promise resolve()之後再次resolve()怎麼辦？我們在then()之前不想立即執行的時候又該怎麼辦？是以出現了RXJS。

RxJS是使用Observables進行反應式程式設計的庫，使編寫異步或基于回調的代碼更容易。

這裡簡單使用RXJS的Observable(這裡可以了解為是一個對象)

将onSubscription函數轉換為實際的Observable。 每當有人訂閱該Observable時，該函數将使用Observer執行個體作為第一個也是唯一的參數進行調用。 onSubscription應該包含Observers的next，error和complete方法。

let observable = Rx.Observable.create(function (observer) {
observer.next();
observer.next();
observer.next();
observer.complete();
});
observable.subscribe(value => console.log(value),
err => { }, () => console.log('this is the end'));
//輸出結果：
 


this is the end
           

隻有當observer.complete();方法執行的時候才會回調。同樣隻用當observer.error()執行的時候，error的回調才會執行。

這裡的observable不會立即執行，隻有放observable.subscribe()的時候才開始執行裡面的方法。

并且observable.subscribe()在不同時候調用都可以傳回值，除非調用observable.unsubscribe()中斷執行。