[新手教程-7] 使用http來與API溝通

Angular處理http是使用rx(Reactive Programming)來實作的,類別的名稱為rxjs
在閱讀此篇之前,建議可以了解一下何謂Reactive Programming,其核心概念為何,這樣會比較容易理解本篇的內容
推薦閱讀:Reactive Programming 簡介與教學(以 RxJS 為例)官網 ReactiveX
RxJS教學:30 天精通 RxJS

使用http來取得api資料

將src/app/hero.service.ts取得資料的方式改由API取得

上面程式碼註解地方代表有修改過的地方。
所有的HttpClient方法都返回一個Observable的物件。一般來說,Observable物件會傳送多次資料給接收者,但http.get所取得的值為例外,因為http方法是發出要求並收到回應後就不會再有動作,因此它只會傳一次資料給取得這個資料的接收者。並且需要在被subscribe後才會啟動動作
http.get預設接收的格式為json,會自動對照所取得的json轉化成一個對應屬性的物件以方便取得資料。

處理錯誤

如果在取得api時發生網路錯誤或其他問題導致無法順利取得伺服器資料時,可以用下面的方法來偵聽錯誤
首先,導入rxjs/operators類別

接著,使用pipe方法擴展Observable並在裡面下達catchError()來處理錯誤的狀況

下面則是catchError的內容

在上面的T是類型參數,在這個例子中,T代表Hero[]。這可以讓程式在打api失敗時依舊可取得符合應用程式所期望的類型的回傳值。

使用http修改伺服器資料

取得資料時使用get,而修改資料時使用put,其參數意義如下:

其中httpOptions較常設定的是headers,也就是宣告傳去的格式

下面是使用updateHero的範例

在RxJS中,有兩個角色,ObservableSubscription,Observable負責產生資料,創建後不會馬上啟動,而在關注(subscribe)後開始啟動。

使用http新增伺服器資料

新增資料在rxjs裡是使用http.post()

使用addHero方法的範例如下:

使用http刪除伺服器資料

刪除資料我們使用http.delete(),範例如下

而呼叫deleteHero的地方則要這樣寫:

上面我們可以看到在呼叫deleteHero時,即便刪除完成後沒有要多做任何時,仍然需要加上subscribe()
就像上面說過的,所有rxjs的動作都會在有人subscribe後才會呼叫,因此如果忽略subscribe(),http將不會將刪除請求發送到伺服器!
Observable需要等到有東西subscribe它,才會被執行。

使用搜尋功能

於src/app/hero.service.ts增加搜索功能

創建一個HeroSearchComponent的class

修改src/app/hero-search/hero-search.component.html

上面的程式碼中,要注意的是這一行

如果光使用for迴圈去使用heroes$,Observable不會做任何事,async透過|這個pipe來自動做subscribe的動作,我們可以不用再次的透過subscribe()來讓Observable被執行
而heroes$則是告知這個for迴圈操作的對象是一個Observable而不是一般的值。

接著我們修改src/app/hero-search/hero-search.component.ts

上面的程式碼中,heroes也需要寫為heroes$並宣告它是一個Observable

searchTerms在這邊被宣告為RxJS裡的Subject.

一個Subject自己本身是observable,並且接收一個observable為參數。因此我們可以對Subject做許多和Observable相同的動作。
也可以使用next(value)去傳值至searchTerms裡,對任何的Observable物件也都能這樣操作。

在這邊的search()方法與keyup事件綁定,searchTerms會返回一個Observable的觀察結果。

另外searchTerms的寫法

注意:使用switchMap(),每個有資格的鍵事件都可以觸發HttpClient.get()方法調用。即使在請求之間暫停了300毫秒,也可能有多個HTTP請求在運行,並且可能不會按照發送的順序返回。
switchMap()保留最初的請求順序,同時只返回最近的HTTP方法調用的observable。來自先前搜尋的結果被取消並被丟棄。
不過,取消先前的searchHeroes() Observable 並不會中止掛起的HTTP請求。不需要的結果在到達應用程序代碼之前就被丟棄了。

最後成品樣子如下:

完整範例檔請見: live example / download example.

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *