Jump to the content

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

Angular2

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

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×