[DAY-11] Angular | Subscribe 同步
在上一篇,使用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取得資料就會將事情變得比較複雜。就得面對然後處理以下兩件事情:處理AJAX行為處理非同步事件第二點,要如何好好地處理非同步事件。再好好地處...
在上一篇,使用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取得資料就會將事情變得比較複雜。就得面對然後處理以下兩件事情:
處理AJAX行為 處理非同步事件第二點,要如何好好地處理非同步事件。再好好地處理非同步事件之前,就先必須了解什麼是RXJS。
先來看看官網如何介紹RXJS:
An API for asynchronous programming with observable streams
在這裡可以看到幾個關鍵字:asynchronous、observable、streams,將會從這幾個關鍵字,簡單快速介紹RXJS
asynchronous (非同步、異步)在真實的前端世界,要取得任何資料或是資訊的動作都是非同步(Asynchronous)。比如說我們希望拿到一個檔案,要先發送一個請求,然後必須等到檔案回來,再執行對這個檔案的操作。這就是一個非同步的行為,而隨著網頁需求的複雜化,我們所寫的 JavaScript 就有各種針對非同步行為的寫法,例如使用 callback 或是 Promise 物件甚至是新的語法糖 async/await —— 但隨著應用需求愈來愈複雜,撰寫非同步的程式碼仍然非常困難。
streams (資料流)什麼是資料流,來看看維基百科對於資料流的定義:
A stream is a sequenc...