摘要：最近在學(xué)習(xí)，它是使用的響應(yīng)式編程的庫，它使編寫異步或基于回調(diào)的代碼更容易。返回的是一個對于指定的。發(fā)送請求使用了，雖然了多次，但是僅發(fā)送一次請求，了結(jié)果。中有一些操作符可以讓監(jiān)聽強制為異步的方式，例如。

最近在學(xué)習(xí)RxJS，它是使用 Observables 的響應(yīng)式編程的庫，它使編寫異步或基于回調(diào)的代碼更容易。

下面主要介紹Observables 與 promise的不同點。

const numberPromise = new Promise((resolve) => {
    resolve(5);
    resolve(10)
});

numberPromise.then(value => console.log(value));

// 輸出 只會有 5

下面改寫為observables的寫法，使用 next 替代 promise 的 resolve， 用subscribe 取代then來訂閱結(jié)果。

const Observable = require("rxjs/Observable").Observable;

const numberObservable = new Observable((observer) => {
    observer.next(5);
    observer.next(10);
});

numberObservable.subscribe(value => console.log(value));

// 輸出 5 10

observable是可以連續(xù)訂閱的，這個和promise的區(qū)別很大。平時我們遇到的可能大多數(shù)都是一個請求一個響應(yīng)的這種情況，但是我們也會存在一些情況：

setInterval，需要resolve多個值

webSockets

DOM events

const numberObservable = new Observable((observer) => {
      let i = 0;
      setInterval(() => {
          observer.next(i++);
      }, 1000);
});
    
numberObservable.subscribe(value => console.log(value));    
// 輸出 0 1 2 3 4 5

const promise = new Promise((resolve) => {
    console.log("promise call")
    resolve(1);
    console.log("promise end")
})

// 執(zhí)行這段代碼 promise call 和 promise end 會立即執(zhí)行
const observable = new Observable(() => {
    console.log("I was called!");
});

// 此時并沒有console

// 只有 observable.subscribe(); 這個時候 I was called！才會被打印出來。

上面兩段代碼就對比可以發(fā)現(xiàn)Observables是lazy的，只有當有人去訂閱（subscribe）的時候Observables才會真正的被執(zhí)行。

如果上方setInterval的函數(shù)寫在promise里面，但是沒有promise.then之類的函數(shù)就會造成資源的浪費，而在observable里面，不訂閱連內(nèi)存都不會分配。

promise默認是不能取消的，可以使用promise的實現(xiàn)庫 bluebird 來實現(xiàn)。bluebird是完全兼容promise并且添加了一些有用的方法。

const Observable = require("rxjs/Observable").Observable;

const observable = new Observable((observer) => {
    let i = 0;
    const token = setInterval(() => {
        observer.next(i++);
    }, 1000);
  
    return () => clearInterval(token);
});

const subscription = observable.subscribe(value => console.log(value + "!"));

setTimeout(() => {
    subscription.unsubscribe();
}, 5000)

// 結(jié)果

0!
1!
2!
3!

這個地方需要注意的是， subscribe 返回的不是一個Observable! 這就是說不能和promise一樣鏈式的subscribe。subscribe返回的是一個對于指定observable的 Subscription。他只有一個方法可以調(diào)用，就是unsubscribe。

promise 是比較激進的，在一個promise被創(chuàng)建的時候，他就已經(jīng)執(zhí)行了，并且不能重復(fù)的被執(zhí)行了。

let time;
const waitOneSecondPromise = new Promise((resolve) => {
    console.log("promise call")
    time = new Date().getTime();
    setTimeout(() => resolve("hello world"), 1000);
});

waitOneSecondPromise.then((value) => {console.log( "第一次", value, new Date().getTime() - time)});

setTimeout(() => {
    waitOneSecondPromise.then((value) => {console.log("第二次", value, new Date().getTime() - time)});   
}, 5000)

// 輸出結(jié)果是 promise call
第一次 hello world 1007
第二次 hello world 5006

上面這個例子中，我創(chuàng)建了一個promise，他是立即執(zhí)行的setTimeout,所以在第一個then函數(shù)中打印時間間隔是約等于 1s，這個是符合我們預(yù)期的，希望能在1s后獲取到promise的返回值 。 第二個then函數(shù)是在 5s之后執(zhí)行的，第二次hello word 和promise的開始時間差約為5s。因為在該promise創(chuàng)建的1s后已經(jīng)resolve，此時就直接調(diào)用then函數(shù)，不會延時1s執(zhí)行。因為promise是只會執(zhí)行一次。

那么再來看obsrvables

const Observable = require("rxjs/Observable").Observable;

let time;
const waitOneSecondObservable = new Observable((observer) => {
    console.log("I was called");
    time = new Date().getTime();
    setTimeout(() => observer.next("hey girl"), 1000);
});

waitOneSecondObservable.subscribe((value) => {console.log( "第一次", value, new Date().getTime() - time)});

setTimeout(() => {
    waitOneSecondObservable.subscribe((value) => {console.log( "第二次", value, new Date().getTime() - time)});
}, 5000)

// 輸出
I was called
第一次 hey girl 1003
I was called
第二次 hey girl 1003

這個就是我們希望的結(jié)果，他在每一次訂閱的時候都會重新去執(zhí)行被監(jiān)聽的函數(shù)，不論什么時候想要用這個函數(shù)，只需要重新 subscribe 一下就可以。

用observable已經(jīng)可以實現(xiàn)多次訂閱，但是這有時候可能不能符合我們的業(yè)務(wù)場景，在http請求中，我們可能希望只發(fā)一次請求，但是結(jié)果被多個訂閱者共用。 Observables 本身沒有提供這個功能，我們可以用 RxJS 這個庫來實現(xiàn)，它有一個 share 的 operator。

const waitOneSecondObservable = new Observable((observer) => {
    // 發(fā)送http請求
});

const sharedWaitOneSecondObservable = 
    waitOneSecondObservable.share();

sharedWaitOneSecondObservable.subscribe(doSomething);

sharedWaitOneSecondObservable.subscribe(doSomethingElse);

// 使用了share，雖然subscribe了多次，但是僅發(fā)送一次請求，share了結(jié)果。

const promise = new Promise((resolve) => {
    resolve(5);
});

promise.then(value => console.log(value + "!"));

console.log("And now we are here.");

// 
And now we are here.
5!

雖然在promise里面 resolve了一個同步的東西，但他還是會先執(zhí)行完代碼。

const Observable = require("rxjs/Observable").Observable;

const observable = new Observable((observer) => {
    // observer.next(5);
    setTimeout(() => {
        observer.next(5);
    })
});

observable.subscribe(value => console.log(value + "!"));
console.log("And now we are here.");

// 
這個如果是直接next 5,則輸出是  5！ -> And now we are here.
采用setTimeout next 5， 則相反  And now we are here.-> 5！

promise一直是異步， Observables則比較靈活，是否為異步得根據(jù)自己的函數(shù)來定，這點也比較危險。rxjs中有一些操作符可以讓監(jiān)聽強制為異步的方式，例如 observeOn。