在上一篇,使用httpClient取得API資料的時候,看到一段陌生的程式碼

  ngOnInit() {
  //  this.heros = this.dataService.getData()
    this.dataService.getData().subscribe(res => {
      console.log(res) //可以打開console看看資料室什麼
      this.heros = res.data

    })
  }

在上一篇提到subscribe是RXJS處理非同步事件的語法,必須要有訂閱(subscribe)才會處理非同步事件。

在這一篇,我們要來討論上一篇提到的。
呼叫API取得資料就會將事情變得比較複雜。就得面對然後處理以下兩件事情:

  1. 處理AJAX行為
  2. 處理非同步事件

第二點,要如何好好地處理非同步事件。再好好地處理非同步事件之前,就先必須了解什麼是RXJS。

什麼是RXJS?

先來看看官網如何介紹RXJS:

An API for asynchronous programming with observable streams

在這裡可以看到幾個關鍵字:asynchronousobservablestreams,將會從這幾個關鍵字,簡單快速介紹RXJS

asynchronous (非同步、異步)

在真實的前端世界,要取得任何資料或是資訊的動作都是非同步(Asynchronous)。比如說我們希望拿到一個檔案,要先發送一個請求,然後必須等到檔案回來,再執行對這個檔案的操作。這就是一個非同步的行為,而隨著網頁需求的複雜化,我們所寫的 JavaScript 就有各種針對非同步行為的寫法,例如使用 callback 或是 Promise 物件甚至是新的語法糖 async/await —— 但隨著應用需求愈來愈複雜,撰寫非同步的程式碼仍然非常困難。

streams (資料流)

什麼是資料流,來看看維基百科對於資料流的定義:

A stream is a sequence of data elements made available over time. A stream can be thought of as items on a conveyor belt being processed one at a time rather than in large batches. — Wikipedia

也就是說,資料流就是時間序列上的一連串資料事件(資料會依照時間先後順序排序,而非直接當作一整大包資料處理)

資料的先後順序是一件很重要的事情
先後順序非常重要,不可以插隊

將資料流的觀念套到前端,如何獲得資料流?

  • 來自一筆或多筆資料
  • 來自陣列的資料
  • 來自事件(ex:點擊事件)
  • 來自Promise
  • …….更多

observable (觀察者)

什麼是觀察者,就必須先提到觀察者模式(Observable Pattern)
觀察者模式就是:
當Observable(可被觀察的對象)發生事情,Observer(觀察者)就可以做出反應。

所以觀察者模式一定要有可被觀察對象。當有人(稱為觀察者)想要呼叫可被觀察對象,這個動作就會稱為訂閱(Subsribe)

如果以生活中的例子舉例:

  • 我想要看報紙,要先跟報社訂報紙才會收到報紙
  • 訂閱或按讚某個粉絲團,當粉絲團有新消息才會通知我

在兩個例子中,誰是可被觀察對象(Observable)?誰是觀察者(Observer)?如果想通了,就可以掌握觀察者模式的概念了。

再次將觀察者模式的觀念套用到前端,前端如何實行觀察者模式?

可被觀察對象 (Observable)

當變數或資源發生變動時,由變數或資源自動告訴我發生變動了

  • 當發生變動 => 非同步:不知道什麼時候發生變動,反正就是發生變動跟我說
  • 由變數自動告知我 => 不必煩惱要如何告訴我程式碼變動

觀察者 (Observer)

當Observable發生變動,觀察者可以做的事情:

  • next=>成功的時候做什麼
  • error=>失敗的時候做什麼
  • completed=>不論成功或失敗,都要做什麼

訂閱 (subscribe)

監聽Observable的動作稱為訂閱 (subscribe),有可被觀察對象,要有觀察者訂閱才會產生動作
例如:一個乏人問津的粉絲團,沒有人按讚或沒有人訂閱,自然不會有人收到粉絲團的最新消息。

小結

今天學到的事情有:

  • 什麼是RXJS
  • 什麼是asynchronous (非同步、異步)
  • 什麼是streams (資料流)
  • 什麼是observable (觀察者)

明天將進入RXJS實際應用