iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

Angular初期筆記系列 第 29

DAY29-Angular6之 HttpClient 基礎說明

HttpClient 啟用

app.module.ts
-----
import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor( private http: HttpClient ) { }

所有 HttpClient 方法的回傳值都是一個 observable of 的物件
Http 是一個 請求/回覆 的協定,你可以傳送一個 請求,它會回傳一個單一個回覆
正常來說,一個 observable 可以隨著時間持續傳值;而 HttpClient 的 observable 比較不會持續接收值,是因為大部分只是傳送出一個值,就結束了,不會再傳送
https://angular.io/tutorial/toh-pt6#http-methods-return-one-value

HtttpClient Get(url,options)

Get(url,options)

  • url:api 的網址
  • option:其他資訊集合的物件

Post(url,body,options)

  • url:api 的網址
  • body:要傳送的內容
  • option:其他資訊集合的物件

再來我們看 option 物件是什麼

ts
-----
import { HttpHeaders } from '@angular/common/http';

// httpOptions 就是 option
const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'my-auth-token'
    })
};
  • headers:HttpHeaders

    • 主要放置 Http Headers 的內容
    • 物件型別
    • Content-Type,指要傳送哪種 body 的 MIME type
  • observe:body、events、response
    body 會回傳 Observable<body插入的類型>
    events 會回傳 Observable<HttpEvent<body插入的類型>>
    response 會回傳 Observable<HttpResponse<body插入的類型>>

解釋:<body插入的類型>是指:
JSON 回傳<T><Object>
text 回傳<text>
Blob 回傳<Blob>
ArrayBuffer 回傳<ArrayBuffer>

HTTP Method

假如忘記 get 、post、put、delete,可以參考下文
http://mikuweb.blogspot.com/2015/10/http-methodgetpost4method.html

參考來源

官方文件-HttpClient


上一篇
DAY28-Angular6之RxJS-實作2
下一篇
DAY30-Angular6之 HttpClient 實作
系列文
Angular初期筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言