🤶🏽 📓 👩🏾‍🤝‍👨🏽 角度の基本：HttpClient ❣️ 🥀 💇🏾

Webサービスからデータを取得する最も一般的な方法は、Httpを使用することです。また、この記事では、Angular 4.3の新しいHttpClientを使用してHttpリクエストを実行する方法を説明します。

Angular 4.3以降、新しいHttpClientがリリースされました。この記事では、新しい顧客についてのみ説明します。

角度> 4.3

HttpClientModule

HttpClient

角度<= 4.3

HttpModule

Http

注：古いhttp実装はまだ4.3に存在するため、正しいものを使用してください。

インポートモジュール

まず、 HttpClientModuleを親モジュールにインポートする必要があります。新しいAngularプロジェクトがある場合、これはおそらくAppModuleになります。モジュールをインポートするには、親モジュールのimportsセクションに追加するだけです。

src / app / app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // ,      ,      import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, HttpClientModule //   ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

シンプルなサービスを作成する

Angularアプリケーションを構築する際の正しいアプローチは、コンポーネントからサービスへのすべてのHTTPリクエストを削除して完全に独立させ、すべてのリクエストを個別のサービスにラップすることです。次に、たとえば、テスト中にサービスのモックバージョンを作成することが可能になります。はい、このアプローチのコードはより正確です。

通常、サービスについては、モジュール内に個別のフォルダーがあります。サービスはどこにありますか、それは完全にあなたの選択です。

各サービスには特定の目的があります。たとえば、httpで猫の写真をリクエストする場合、サービスはCatPictureServiceと呼ばれます。サービスの基本は次のようになります。

src / app / services / catPicture.service.ts

 import { Injectable } from '@angular/core'; @Injectable() export class CatPictureService { constructor() { } }

サービスからhttpリクエストを作成するには、Angular HttpClientが必要です。依存性注入（DI）を介して簡単に追加できます。

src / app / services / catPicture.service.ts

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

リクエスト作成

リクエストを行うには、サービスに新しいメソッドを追加します。メソッドは通常動詞と呼ばれます。ここでは、getメソッドを呼び出します。彼はURLで猫の写真を受け取ります。

 public get(url: string): Observable<any>{ return this.httpClient.get(url); }

ご覧のとおり、Angular HttpClientは非常に単純です。必要なのは、getメソッドを呼び出してURLを渡すだけです。このgetメソッドはObservableオブジェクトを返します。このクラスは、Angularの多くの場所で使用されているrxjsライブラリの一部です。 1つの使用例はHttpClientです。

promise（Promise）と同様に、observer（Observable）にはすぐに値が含まれません。代わりに、コールバックを登録できるサブスクライブメソッドがあります。このコールバックは、結果が利用可能になるとすぐに呼び出されます。約束に加えて、Observableは複数の値を返すことができます。結果の流れを取り戻すことができます。しかし、このレッスンでは重要ではありません。この場合、Observableは1つの値のみを返します。

オブザーバブルのサブスクライブ

それでは、実際の値を取得するために新しいメソッドが返されたオブザーバーをどのようにサブスクライブできますか？これは非常に簡単です。 subscribeメソッドを呼び出して、コールバック用に1つ（または2つ）のメソッドを登録するだけです。結果が利用可能になると、最初のコールバックが呼び出されます。結果をパラメーターとして取得します。 2番目のコールバックは、リクエストでエラーが発生したときにトリガーされます。パラメータとしてエラーオブジェクトを受け取ります。

これは、コードでどのように見えるかです。 picServiceのインスタンスを作成しました。このサービスを自分で確認して要求する必要があります。

 this.picService.get('http://anyurl.com').subscibe(value =>{ // value -  }, error => { // error -   });

注常にサブスクライブする必要があります（subscibeメソッドを呼び出します）。そうしないと、リクエストは行われません。

オプション

Httpは、さまざまなオプション、ヘッダー、および形式の膨大な選択をサポートします。 HttpClientからこれらすべての異なる要求を行うために、そのすべてのメソッドはオプションのパラメーターとしてオプションオブジェクトを取ります。

回答フォーマット

Angular 4.3以降、デフォルトの応答形式はJSONです。これにより、HttpClientの使用が非常に簡単になります。回答を手動で解析する必要がなくなりました。角度はあなたのためにそれを行います。

JSONは最も一般的な応答形式ですが、JSONを使用できない多くの例があります。たとえば、猫の写真をリクエストする場合。

自動応答分析を回避するために、optionsオブジェクトを使用してresponseTypeプロパティを事前定義できます。

 { responseType: 'text' }

見出し

要求にヘッダーを追加するには、optionsオブジェクトのheadersプロパティを使用します。これを行うには、 HttpHeadersオブジェクトが必要です。すべての見出しの定義が含まれています。 Headersオブジェクトは古いHttpクライアントの一部であるため、使用しないでください。

 const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); const options = { headers: headers };

URLパラメーター

optionsオブジェクト内でurlパラメーターを定義することもできます。これを行うには、 HttpParamsオブジェクトを作成する必要があります。したがって、URL文字列に追加する必要はありません。

 const params = new HttpParams().set('id', '3'); const options = {params: params};

進捗追跡

新しいHttpClientの新機能の1つは、リクエストの進行状況を追跡する機能です。たとえば、大きなファイルをダウンロードする場合、おそらくダウンロードの進行状況をユーザーに報告する必要があります。

これを行うには、リクエストを別のリクエストオブジェクトに分割する必要があります。進捗状況を取得するには、 reportProgressプロパティをtrueに設定する必要があります。

 import { Observable } from 'rxjs/Observable'; import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { HttpRequest } from "@angular/common/http"; import { Subject } from "rxjs/Subject"; import { HttpEventType } from "@angular/common/http"; import { HttpResponse } from "@angular/common/http"; public post(url: string, file: File): Observable<number>{ var subject = new Subject<number>() const req = new HttpRequest('POST', url, file, { reportProgress: true, }); this.httpClient.request(req).subscribe(event => { if (event.type === HttpEventType.UploadProgress) { const percentDone = Math.round(100 * event.loaded / event.total); subject.next(percentDone); } else if (event instanceof HttpResponse) { subject.complete(); } }); return subject.asObservable(); }

postメソッドは、ダウンロードの進行状況を表すObservableを返します。

インターセプター

新しいHttpClientのもう1つの優れた機能はインターセプターです。場合によっては、サーバーに到達する前にリクエストを変更する必要があります。または、各回答を変更しますか？ Interceptorを使用してこれを行うことができます。これは、http-apiと実際のリクエストの間の一種のミドルウェアです。

一般的な使用例の1つに認証があります。サーバーから応答を取得するには、リクエストに何らかの認証メカニズムを追加する必要があります。もちろん、サービスの承認ヘッダーを変更するだけです。しかし、このタスクは常に同じですよね？常に同じプロトコルです。アプリケーション間でさえ、決して変化しません。それでは、一度ロジックを書き、それをどこでも再利用しないのはなぜですか？

インターセプターの定義

サービスのように、インターセプターはInjectableです。

 import { Observable } from 'rxjs/Observable'; import {Injectable} from '@angular/core'; import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http'; @Injectable() export class AuthenticationInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { req.headers.append('Authorization', '<SOME-TOKEN>') return next.handle(req); } }

アプリケーションは複数のインターセプターを持つことができるため、チェーンで編成されます。最初の要素はAngularによって呼び出されます。その後、次のインターセプターにリクエストを送信する責任があります。これを行うには、終了後すぐにチェーン内の次の要素のhandleメソッドを呼び出します。

これを行う前に、必要に応じてリクエストを変更できます。たとえば、認証ヘッダーにトークンを追加します。

この例は、完全なものでも再利用可能なものでもありません。しかし、これにより、ここから先に進む方法のアイデアが得られるはずです。

インターセプターの紹介

サービスと同様に、インターセプターもフックする必要があります。これを行うには、親モジュール（AppModule）は次のようになります。

src / app / app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // ,      ,      import { HttpClientModule } from '@angular/common/http'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, HttpClientModule //   ], providers: [{ provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true, }], bootstrap: [AppComponent] }) export class AppModule { }

合計

これで、httpを介して外部データを送受信する方法がわかりました。また、使用できるオプションと進行状況を追跡する方法についても学びました。

この記事をお楽しみください。

角度の基本：HttpClient