[功能介紹-20] HttpClient

使用HttpClientModule

官方文件:https://angular.io/api/common/http/HttpClientModule

下面是一個簡單的使用範例,假使我們要讀取這樣格式的JSON資料:

this.results即為一個含有["item1","item2"]的陣列

定義回傳格式

首先先建立一個要回傳的物件介面

在get後面設定要回傳時可取得的物件或介面

取得完整的HTTP Response

很多時候我們也會需要Http header的資料,而不光是回傳的body,這時候可以更改observe的值為response

處理錯誤訊息

可以在.subscribe()下面增加err函數來處理HTTP錯誤的狀況

err這個含數可以有傳入更詳細的HTTP錯誤訊息物件HttpErrorResponse

遇到錯誤時自動重試

RxJS有一個有用的運算符.retry(),可以在遇到錯誤時自動重新嘗試,使用範例如下:
先導入需要的類別

使用的方式就是直接.retry()並傳入重試次數

接收非JSON格式的資料

傳入responseType可以設定預期會接收到的資料格式,angular預設值是json,如果是其他格式則需要設定這個欄位。
可接受的項目有『arraybuffer』、『blob』、『json』、『text』
下面是使用方式:

發送POST請求

下面是發送POST請求的範例:

所有rxjs的動作都會在有人subscribe後才會呼叫,因此如果忽略subscribe(),http將不會做任何動作。

設置request的header

HttpHeaders的內容是不變的,每次set()時會返回一個新的實體,並套用所設定的更改。

設置URL參數

如果想要發送請求至/api/items/add?id=3,可以用以下的寫法

發表迴響

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