AngularのHttpClientの概要

投稿日: 2022-04-20 2022-10-07
タグ: Angular

Angular 4.3 は、HttpClientライブラリを使用してhttpリクエストを処理するための新しい簡単な方法をにもたらします。現在のHttpライブラリで重大な変更が発生しないように、新しい名前で使用できます。 HttpClient は、進行状況イベントをリッスンする機能や、要求または応答を監視または変更するインターセプターなどの高度な機能も提供します。

HttpClient を試すには、Angular4.3以降を使用していることを確認してください

インストール

まず、アプリモジュールの @ angle / common /httpからHttpClientModuleをインポートする必要があります。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

次に、通常どおりにHttpClientを使用できます。

some.service.ts

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';
@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}

基本的な使用法

基本的なGET、POST、PUT、PATCH、またはDELETEリクエストの作成は、古いHttpAPIで使用していたものと非常によく似ています。主な違いの1つは、デフォルトでJSON応答が期待されるため、JSON応答を明示的に解析する必要がなくなったことです。

GETリクエストのサンプルは次のとおりです。

// ...

constructor(private http: HttpClient) {}

getData() {
  this.http.get(this.url).subscribe(res => {
    this.posts = res;
  });
}

応答としてJSON以外のものを期待する場合は、responseTypeキーを持つオブジェクトを使用して期待される応答タイプを指定できます。

getData() {
  this.http.get(this.url, { responseType: 'text' }).subscribe(res => {
    this.data = res;
  });
}

応答の形状のインターフェイスを定義し、そのインターフェイスに対してタイプチェックすることもできます。

interface Post {
  title: string;
  body: string;
};

// ...

constructor(private http: HttpClient) {}

getData() {
  this.http.get<Post>(this.url).subscribe(res => {
    this.postTitle = res.title;
  });
}

デフォルトでは、HttpClientは応答の本文を返します。 observeキーを‘response’の値に設定してオブジェクトを渡すと、完全な応答を取得できます。これは、特定のヘッダーを検査するのに役立ちます。

getData() {
  this.http.get<Post>(this.url, { observe: 'response' }).subscribe(res => {
    this.powered = res.headers.get('X-Powered-By');
    this.postTitle = res.body.title;
  });
}

リクエストの投稿、配置、パッチ

POST、PUT、またはPATCHリクエストの作成も同様に簡単です。

postData() {
  this.http.post(this.url, this.payload).subscribe();
}

リクエストを行うには、まだサブスクライブする必要があることに注意してください。サブスクライブ呼び出しがない場合、要求はコールドです。明らかに、応答やエラーを処理する必要があります。

postData() {
  this.http.post(this.url, this.payload).subscribe(
    res => {
      console.log(res);
    },
    (err: HttpErrorResponse) => {
      console.log(err.error);
      console.log(err.name);
      console.log(err.message);
      console.log(err.status);
    }
  );
}

要求エラーのタイプはHttpErrorResponseで、エラー名、エラーメッセージ、サーバーステータスなどが含まれます。

ヘッダーまたはクエリパラメータを渡すためのオプションは、3番目の引数として渡されたオブジェクトのheadersまたはparamsキーを使用して、POST、PUT、またはPATCHリクエストに追加することもできます。

updatePost() {
  this.http
    .put(this.url, this.payload, {
      params: new HttpParams().set('id', '56784'),
      headers: new HttpHeaders().set('Authorization', 'some-token')
    })
    .subscribe(...);
}

ここで、HttpParamsクラスとHttpHeadersクラスの使用に注意してください。これらは@angle / common /httpからもインポートする必要があります。

進捗イベント

HttpClient の優れた新機能は、進行状況イベントをリッスンする機能です。これはあらゆるタイプのリクエストで実行でき、リクエストイベントのライフサイクル中にさまざまな情報が利用可能になります。 GETリクエストの完全な例を次に示します。

import { Injectable } from '@angular/core';
import {
  HttpClient,
  HttpRequest,
  HttpEvent,
  HttpEventType
} from '@angular/common/http';

@Injectable()
export class DataService {
  url = '/some/api';

  constructor(private http: HttpClient) {}

  getData() {
    const req = new HttpRequest('GET', this.url, {
      reportProgress: true
    });

    this.http.request(req).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Sent:
          console.log('Request sent!');
          break;
        case HttpEventType.ResponseHeader:
          console.log('Response header received!');
          break;
        case HttpEventType.DownloadProgress:
          const kbLoaded = Math.round(event.loaded / 1024);
          console.log(`Download in progress! ${ kbLoaded }Kb loaded`);
          break;
        case HttpEventType.Response:
          console.log('😺 Done!', event.body);
      }
    });
  }
}

まず、 HttpRequest クラスのインスタンスを作成し、 reportProgress オプションを使用して、リクエストオブジェクトを作成する必要があります。
次に、リクエストオブジェクトをサブスクライブしてリクエストを開始し、リクエストの存続期間中にさまざまなイベントタイプをリッスンします。イベントの種類に応じて適切に対応できます。使用可能なイベントタイプは、 Sent 、 UploadProgress 、 ResponseHeader 、 DownloadProgress 、 Response 、 User[ X152X]。
上記の例では、GET応答からこれまでにダウンロードされたデータの量を取得します。また、POSTまたはPUTリクエストのような場合は、次のようなものを使用してアップロードされたペイロードの割合を取得することもできます。 100 * event.loaded / event.total. これにより、プログレスバーをユーザーに簡単に表示できます。

🤓この投稿では、HttpClientの基本について説明し、次に、HttpClientのキラー機能であるインターセプターの使用に取り組みます。公式ドキュメントにアクセスして、さらに詳しく調べることもできます。

getdocs

13036