web-dev-qa-db-ja.com

角度4でHTTPとHTTPClientの違いは？

Angularプログラムをテストするための模擬Webサービスを構築するために使用するものを知りたいですか？

angularhttphttpclient
213
Aiyoub Amini

Angular 4.3.x以上を使用している場合は、HttpClientからのHttpClientModuleクラスを使用します。

import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...

 class MyService() {
    constructor(http: HttpClient) {...}

これは@angular/httpモジュールからhttpをアップグレードしたもので、以下の点が改善されています。

  • インターセプターはミドルウェアロジックをパイプラインに挿入することを可能にします
  • 不変のリクエスト/レスポンスオブジェクト
  • リクエストのアップロードとレスポンスのダウンロードの両方の進行状況イベント

これがどのように機能するかについては、 インサイダーによるインターセプターとHttpClientの仕組みに関するガイドをAngular でご覧ください。

  • JSONボディタイプのサポートを含む、型指定された同期レスポンスボディアクセス
  • JSONは想定されるデフォルトであり、明示的に解析する必要はもうありません。
  • 要求後検証とフラッシュベースのテストフレームワーク

古いhttpクライアントを進めることは推奨されません。これは コミットメッセージ と 公式ドキュメント ）へのリンクです。

また、古いhttpが新しいHttpの代わりにHttpClientクラストークンを使ってインジェクトされたことに注意してください。

import { HttpModule } from '@angular/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpModule
 ],
 ...

 class MyService() {
    constructor(http: Http) {...}

また、新しいHttpClientは実行時にtslibを必要とするように見えるので、SystemJSを使用している場合はnpm i tslibをインストールしてsystem.config.jsを更新する必要があります。

map: {
     ...
    'tslib': 'npm:tslib/tslib.js',

また、SystemJSを使用する場合は、別のマッピングを追加する必要があります。

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
313
Max Koretskyi aka Wizard

繰り返しになりたくないが、他の方法で要約するだけでよい。

  • JSONからオブジェクトへの自動変換
  • 応答タイプの定義
  • イベント発火
  • ヘッダの簡単な構文
  • インターセプター

私は古い "http"と新しい "HttpClient"の違いをカバーした記事を書きました。目標はそれを可能な限り簡単な方法で説明することでした。

Angularの新しいHttpClientについて簡単に -

39
skryvets

これは良い参照です、それは私がhttpClientに私のhttpリクエストを切り替えるのを助けました

https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450

両者の違いを比較し、コード例を示します。

これは私のプロジェクトでhttpclientにサービスを変更している間に私が扱ったほんの少しの違いです（私が述べた記事から借りて）：

インポート中

import {HttpModule} from '@angular/http';
import {HttpClientModule} from '@angular/common/http';

応答の要求と解析

@角度/ http

 this.http.get(url)
      // Extract the data in HTTP Response (parsing)
      .map((response: Response) => response.json() as GithubUser)
      .subscribe((data: GithubUser) => {
        // Display the result
        console.log('TJ user data', data);
      });

@角度/共通/ http

 this.http.get(url)
      .subscribe((data: GithubUser) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

注： 返されたデータを明示的に抽出する必要がなくなりました。デフォルトでは、返されたデータがJSON型の場合、特別なことをする必要はありません。 

しかし、テキストやBLOBのような他のタイプのレスポンスを解析する必要がある場合は、リクエストにresponseTypeを必ず追加してください。そのようです：

responseTypeオプションを指定してGET HTTPリクエストを行う：

 this.http.get(url, {responseType: 'blob'})
      .subscribe((data) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

インターセプターの追加

私はまた、すべてのリクエストに私の承認用のトークンを追加するためにインターセプターを使用しました。

これは良い参照です： https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

そのようです：

@Injectable()
export class MyFirstInterceptor implements HttpInterceptor {

    constructor(private currentUserService: CurrentUserService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // get the token from a service
        const token: string = this.currentUserService.token;

        // add it if we have one
        if (token) {
            req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
        }

        // if this is a login-request the header is 
        // already set to x/www/formurl/encoded. 
        // so if we already have a content-type, do not 
        // set it, but if we don't have one, set it to 
        // default --> json
        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        // setting the accept header
        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        return next.handle(req);
    }
}

それはかなりいいアップグレードです！

15
abann sunny

強く型付けされたコールバックでHttpClientを使う _を可能にするライブラリがあります。

データとエラーは、これらのコールバックを介して直接利用できます。

A reason for existing

ObservableでHttpClientを使用するときは、コードの残りの部分で.subscribe（x => ...）を使用する必要があります。

これは、Observable <HttpResponse <T>>がHttpResponseに関連付けられているためです。

これはhttp layerとあなたのコードの残りの部分とを密結合します。

このライブラリは.subscribe（x => ...）部分をカプセル化し、モデルを通してデータとエラーのみを公開します。

強く型付けされたコールバックでは、残りのコードであなたのモデルを扱う必要があるだけです。

このライブラリの名前はangular-extended-http-clientです。

GitHub上の角度拡張httpクライアントライブラリ

NPMの角度拡張httpクライアントライブラリ /

とても使いやすいです。

使用例

強く型付けされたコールバックは 

成功：

  • IObservable <T>
  • IObservableHttpResponse
  • IObservableHttpCustomResponse <T>

失敗：

  • IObservableError <TError>
  • IObservableHttpError
  • IObservableHttpCustomError <TError>

プロジェクトとアプリモジュールにパッケージを追加します。

import { HttpClientExtModule } from 'angular-extended-http-client';

そして@NgModuleインポートで

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

あなたのモデル

//Normal response returned by the API.
export class RacingResponse {
    result: RacingItem[];
}

//Custom exception thrown by the API.
export class APIException {
    className: string;
}

あなたのサービス

あなたのサービスでは、これらのコールバックタイプを使ってパラメータを作成するだけです。

次に、それらをHttpClientExtのgetメソッドに渡します。

import { Injectable, Inject } from '@angular/core'
import { RacingResponse, APIException } from '../models/models'
import { HttpClientExt, IObservable, IObservableError, ResponseType, ErrorType } from 'angular-extended-http-client';
.
.

@Injectable()
export class RacingService {

    //Inject HttpClientExt component.
    constructor(private client: HttpClientExt, @Inject(APP_CONFIG) private config: AppConfig) {

    }

    //Declare params of type IObservable<T> and IObservableError<TError>.
    //These are the success and failure callbacks.
    //The success callback will return the response objects returned by the underlying HttpClient call.
    //The failure callback will return the error objects returned by the underlying HttpClient call.
    getRaceInfo(success: IObservable<RacingResponse>, failure?: IObservableError<APIException>) {
        let url = this.config.apiEndpoint;

        this.client.get(url, ResponseType.IObservable, success, ErrorType.IObservableError, failure);
    }
}

あなたのコンポーネント

あなたのコンポーネントでは、あなたのサービスが注入され、getRaceInfo AP​​Iが以下のように呼び出されます。

  ngOnInit() {    
    this.service.getRaceInfo(response => this.result = response.result,
                                error => this.errorMsg = error.className);

  }

コールバックで返されるresponseとerrorの両方が強く型付けされています。例えば。 responseはtype RacingResponseで、errorはAPIExceptionです。

あなたはこれらの強く型付けされたコールバックであなたのモデルを扱うだけです。

それゆえ、あなたのコードの残りはあなたのモデルについて知っているだけです。

また、従来のルートを使用してService APIからObservable <HttpResponse<T>>を返すこともできます。

0
Shane

HttpClient は4.3に同梱された新しいAPIです。プログレスイベント、デフォルトでのjsonのデシリアライゼーション、インターセプター、その他多数の優れた機能をサポートするようにAPIを更新しました。詳細はこちらhttps://angular.io/guide/http

Http は古いAPIであり、将来的には非推奨になります。

それらの使用法は基本的なタスクに非常に似ているので、私はHttpClientを使用することをお勧めします。それがより現代的で使いやすい代替品だからです。

0
Chirag