GETやPOSTだけじゃない!Angular2のHttpメソッド

GETやPOSTだけじゃない!Angular2のHttpメソッド

これまでの記事では、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メソッドについて説明しておきましょう。

putpatchHTTP/1.1 というHTTPの仕様で定められているHTTPメソッドの種類なんです。

HTTPメソッドというのは、以下のような種類があります。

メソッド 説明
GET 最も一般的に使用されるメソッドです。ブラウザはサーバに対してページの取得を要求します。
HEAD GETと同じですが、ヘッダのみの情報を要求します。
POST クライアントからデータを(名前と値)のセットで渡します。フォームに入力されたデータをサーバに送るときなどに使用します。
PUT ファイルをサーバにアップロードする際に用いられます。
PATCH PUTと同じですが、差分のみを置き換えるために使用します。
DELETE 指定したリソースを削除することをサーバに要求します。
CONNECT プロキシサーバを経由して SSL 通信する際などに使用します。
OPTIONS サーバがサポートしているメソッドやオプションを調べる際に用います。
TRACE HTTP要求がどのプロキシサーバを経由して送信されるかなど、HTTP の動作をトレースする際に用います。

Angular2ではこれらをサポートしているということなんです!
jQueryなどにはない機能なので、嬉しいですね!!

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.