HttpModuleとHttpClientModuleの違い


229

Angular 4アプリをテストするためのモックWebサービスを構築するために使用するものはどれですか?



1
私は実際に昨日自分のブログでその新機能のいくつかについて書きました:blog.jonrshar.pe/2017/Jul/15/angular-http-client.html
jonrsharpe


6
チュートリアルはHttpModuleを使用し、angular.io / guide / httpはHttpClientModuleを使用します。どちらを使用する必要があるのか​​、何を使用するために必要なAngularのバージョンを説明するものでもありません。
ミッキーシーガル2017

RESTfulなAPIを消費するように、この角度8のHttpClient例を確認してくださいfreakyjolly.com/...
コードスパイ

回答:


338

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

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

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

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

これはhttpfrom @angular/httpモジュールのアップグレードバージョンであり、次の点が改善されています。

  • インターセプターにより、ミドルウェアロジックをパイプラインに挿入できます。
  • 不変のリクエスト/レスポンスオブジェクト
  • リクエストのアップロードとレスポンスのダウンロードの両方の進行状況イベント

どのように機能するかについては、AngularのインターセプターとHttpClientメカニズムに関するInsiderのガイドをご覧ください

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

今後、古いhttpクライアントは非推奨になります。ここにコミットメッセージ公式ドキュメントへのリンクがあります。

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

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

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

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

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

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

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

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

1
HttpClientModuleをインポートしようとしています。しかし、「nang start」コマンドを使用してインストールしたnode_modulesディレクトリに「@ angular / common / http」がありません。手伝ってくれますか?
Dheeraj Kumar 2017

1
@DheerajKumar、どのバージョンを使用していますか?4.3.0以降でのみ利用可能
Max Koretskyi 2017

gitから角度クイックスタートをダウンロードしました。そしてpackage.jsonには、「@ angular / common」:「^ 4.3.0」が存在します。@ angular / common / httpはありません。
Dheeraj Kumar 2017

node_modulesフォルダを削除してnpm install再実行
Max Koretskyi 2017

5
私はこれと同じ問題に遭遇しました(私はSystem.jsを使用しています)。この回答から欠落していることの一つは、あなたはまた、次のようにsystem.jsに新しいモジュールをマップする必要がありますということです: '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
タイラーO

43

繰り返したくはありませんが、他の方法で要約します(新しいHttpClientに追加された機能)。

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

古い「http」と新しい「HttpClient」の違いを取り上げた記事を書きました。目標は、それを可能な限り簡単な方法で説明することでした。

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


18

これは良いリファレンスです。httpリクエストをhttpClientに切り替えるのに役立ちました。

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

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

これは、プロジェクトでサービスをhttpclientに変更するときに扱ったいくつかの違いです(前述の記事を借用します)。

インポート

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

応答の要求と解析:

@ angular / 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);
      });

@ angular / common / 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);
    }
}

そのかなり素晴らしいアップグレード!


リンクとしてだけでなく、回答に関連情報を含める必要があります
Michael

1

厳密に型指定されたコールバックでHttpClient使用できるライブラリがあります

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

存在する理由

ObservableでHttpClientを使用する場合は、コードの残りの部分で.subscribe(x => ...)を使用する必要があります。

これは、観察可能な< HttpResponse< T>>に縛られるのHttpResponse

これにより、httpレイヤー残りのコード密接に結合されます

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

強く型付けされたコールバックを使用すると、コードの残りの部分でモデルを処理するだけで済みます。

ライブラリはangular-extended-http-clientと呼ばれます

GitHubのangular-extended-http-clientライブラリ

NPMのangular-extended-http-clientライブラリ

とても使いやすい。

使用例

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

成功:

  • 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 APIが呼び出されます。

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

  }

コールバックで返される応答エラーはどちらも厳密に型指定されています。例えば。応答RacingResponseタイプで、エラーAPIExceptionです。

これらの強く型付けされたコールバックでモデルを処理するだけです。

したがって、残りのコードはモデルについてのみ認識します。

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


0

HttpClientは4.3に付属する新しいAPIであり、進行状況イベント、デフォルトでのjson逆シリアル化、Interceptorsおよびその他の多くの優れた機能をサポートするAPIを更新しました。詳細はこちらhttps://angular.io/guide/http

Httpは古いAPIであり、最終的には廃止される予定です。

基本的なタスクの使用法は非常に似ているため、HttpClientを使用することをお勧めします。HttpClientは、よりモダンで使いやすい代替手段であるためです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.