これまでの記事では、getメソッドによるデータの取得や
postメソッドによるデータの送信を紹介してきました。
実はAngular2のHttpクライアントには他にも更新や削除といったHttpに関係する便利なメソッドが用意されています。
今日はAngular2のHttpメソッドについて網羅します。
メソッドの種類
公式ドキュメントのHttpのクラスを覗いてみましょう。
Angular2のHTTPクライアントのメソッドには、request, get, post, put, delete, patch, head と、こんなにあるんですね。
ぼくはこのサポートにビックリしました。
さっそくひとつずつ見ていきましょう。
request(url: string | Request, options?: RequestOptionsArgs) : Observable
その名のとおり、リクエストを行います。
第1引数はURL文字列かRequestオブジェクトのインスタンスである必要があります。
もしURLを指定した場合、第2引数にはRequestOptionオブジェクトを渡すことができ、オプションを指定することができます。
constructor(private http: Http) { }
requestData() {
return this.http.request('/api/path/to')
.map((res) => {
return res.json();
});
}
get(url: string, options?: RequestOptionsArgs) : Observable
get によるリクエストを行います。
request とほぼ同じですが、第1引数に指定できるのはURLのみ。
データを取得する際に使用します。
constructor(private http: Http) { }
getData() {
return this.http.get('/api/path/to')
.map((res) => {
return res.json();
});
}
post(url: string, body: string, options?: RequestOptionsArgs) : Observable
post によるリクエストを行います。
第2引数には、送信するデータを指定します。
データの送信の際に使用します。
constructor(private http: Http) { }
postData(data) {
let body = JSON.stringify(data);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post('/api/path/to', body, options)
.map((res) => {
return res.json();
});
}
put(url: string, body: string, options?: RequestOptionsArgs) : Observable
put によるリクエストを行います。
post 同様、第2引数に送信するデータを指定します。
サーバーのデータを置き換える際に使用します。
constructor(private http: Http) { }
changeData(data) {
let body = JSON.stringify(data);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.put('/api/path/to', body, options)
.map((res) => {
return res.json();
});
}
delete(url: string, options?: RequestOptionsArgs) : Observable
delete によるリクエストを行います。
サーバーのデータを削除する際に使用します。
constructor(private http: Http) { }
deleteData() {
let headers = new Headers({ 'Content-Type': 'application/json' });
return this.http.delete('/api/path/to', headers)
.map((res) => {
return res.json();
});
}
patch(url: string, body: string, options?: RequestOptionsArgs) : Observable
patch によるリクエストを行います。
post 同様、第2引数に送信するデータを指定します。
サーバーのデータの差分のみを置き換える際に使用します。
constructor(private http: Http) { }
updateData(data) {
let body = JSON.stringify(data);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.patch('/api/path/to', body, options)
.map((res) => {
return res.json();
});
}
head(url: string, options?: RequestOptionsArgs) : Observable
head によるリクエストを行います。
HTTPヘッダを取得します。
constructor(private http: Http) { }
getHeader() {
return this.http.head('/api/path/to');
}
HTTPのメソッドってこんなにあるの？
「ん〜、なんか put とか patch とか出てきたけどよくわからない」、「HTTPってGETとPOSTだけじゃないの？」という人のためにHTTPメソッドについて説明しておきましょう。
put や patch は HTTP/1.1 というHTTPの仕様で定められているHTTPメソッドの種類なんです。
HTTPメソッドというのは、以下のような種類があります。
| メソッド | 説明 |
|---|---|
| GET | 最も一般的に使用されるメソッドです。ブラウザはサーバに対してページの取得を要求します。 |
| HEAD | GETと同じですが、ヘッダのみの情報を要求します。 |
| POST | クライアントからデータを（名前と値）のセットで渡します。フォームに入力されたデータをサーバに送るときなどに使用します。 |
| PUT | ファイルをサーバにアップロードする際に用いられます。 |
| PATCH | PUTと同じですが、差分のみを置き換えるために使用します。 |
| DELETE | 指定したリソースを削除することをサーバに要求します。 |
| CONNECT | プロキシサーバを経由して SSL 通信する際などに使用します。 |
| OPTIONS | サーバがサポートしているメソッドやオプションを調べる際に用います。 |
| TRACE | HTTP要求がどのプロキシサーバを経由して送信されるかなど、HTTP の動作をトレースする際に用います。 |
Angular2ではこれらをサポートしているということなんです！
jQueryなどにはない機能なので、嬉しいですね！！
