Perbedaan antara HttpModule dan HttpClientModule

Yang mana yang digunakan untuk membangun layanan web tiruan untuk menguji aplikasi Angular 4?

Gunakan HttpClientkelas dari HttpClientModulejika Anda menggunakan Angular 4.3.x dan di atas:

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

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

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

Ini adalah versi yang ditingkatkan httpdari @angular/httpmodul dengan peningkatan berikut:

• Interceptor memungkinkan logika middleware untuk dimasukkan ke dalam pipa
• Objek permintaan / respons yang tidak dapat diubah
• Kemajuan acara untuk unggahan permintaan dan unduhan tanggapan

Anda dapat membaca tentang cara kerjanya di panduan orang dalam tentang pencegat dan mekanika HttpClient di Angular .

• Akses bodi respons sinkron yang diketik, termasuk dukungan untuk tipe tubuh JSON
• JSON dianggap default dan tidak perlu lagi diuraikan secara eksplisit
• Verifikasi pasca-permintaan & kerangka pengujian berbasis flush

Memajukan klien http lama akan ditinggalkan. Berikut adalah tautan ke pesan komit dan dokumen resmi .

Perhatikan juga bahwa http lama disuntikkan menggunakan Httptoken kelas, bukan yang baru HttpClient:

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

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

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

Selain itu, HttpClienttampaknya baru diperlukan tslibdalam runtime, jadi Anda harus menginstalnya npm i tslibdan memperbarui system.config.jsjika Anda menggunakan SystemJS:

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

Dan Anda perlu menambahkan pemetaan lain jika Anda menggunakan SystemJS:

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

Tidak ingin berulang-ulang, tetapi hanya untuk meringkas dengan cara lain (fitur ditambahkan di HttpClient baru):

• Konversi otomatis dari JSON ke objek
• Definisi tipe respons
• Acara penembakan
• Sintaks yang disederhanakan untuk tajuk
• Pencegat

Saya menulis sebuah artikel, di mana saya membahas perbedaan antara "http" lama dan "HttpClient" baru. Tujuannya adalah menjelaskannya dengan cara termudah.

Cukup tentang HttpClient baru di Angular

Ini adalah referensi yang bagus, ini membantu saya mengalihkan permintaan http saya ke httpClient

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

Ini membandingkan keduanya dalam hal perbedaan dan memberikan contoh kode.

Ini hanya beberapa perbedaan yang saya tangani saat mengubah layanan ke httpclient di proyek saya (meminjam dari artikel yang saya sebutkan):

Pengimporan

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

Meminta dan memilah respons:

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

Catatan: Anda tidak perlu lagi mengekstrak data yang dikembalikan secara eksplisit; secara default, jika data yang Anda dapatkan adalah tipe JSON, maka Anda tidak perlu melakukan apa pun tambahan.

Tetapi, jika Anda perlu menguraikan jenis respons lain seperti teks atau gumpalan, maka pastikan Anda menambahkan responseTypedalam permintaan. Seperti itu:

Membuat permintaan GET HTTP dengan responseTypeopsi:

 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);
      });

Menambahkan Interceptor

Saya juga menggunakan pencegat untuk menambahkan token untuk otorisasi saya untuk setiap permintaan:

Ini adalah referensi yang bagus: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

seperti itu:

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

Ini peningkatan yang cukup bagus!

Ada perpustakaan yang memungkinkan Anda untuk menggunakan HttpClient dengan panggilan balik yang sangat diketik .

Data dan kesalahan tersedia langsung melalui panggilan balik ini.

Ketika Anda menggunakan HttpClient dengan Observable, Anda harus menggunakan .scribe (x => ...) di sisa kode Anda.

Ini karena Observable HttpResponse<< T>> terkait dengan HttpResponse .

Ini erat pasangan yang http lapisan dengan sisa kode Anda .

Pustaka ini merangkum bagian .scribe (x => ...) dan hanya memaparkan data dan kesalahan melalui Model Anda.

Dengan panggilan balik yang sangat diketik, Anda hanya perlu berurusan dengan Model Anda di sisa kode Anda.

Perpustakaan disebut angular-extended-http-client .

pustaka angular-extended-http-client di GitHub

pustaka sudut-diperpanjang-http-klien pada NPM

Sangat mudah digunakan.

Penggunaan sampel

Callback yang sangat diketik adalah

Keberhasilan:

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

Kegagalan:

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

Tambahkan paket ke proyek Anda dan di modul aplikasi Anda

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

dan dalam impor @NgModule

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Model Anda

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

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

Layanan Anda

Di Layanan Anda, Anda hanya membuat params dengan jenis-jenis panggilan balik ini.

Kemudian, sampaikan ke metode get HttpClientExt .

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);
    }
}

Komponen Anda

Di Komponen Anda, Layanan Anda disuntikkan dan API getRaceInfo disebut seperti yang ditunjukkan di bawah ini.

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

  }

Baik, respons dan kesalahan yang dikembalikan dalam callback diketik dengan kuat. Misalnya. responsnya adalah tipe RacingResponse dan kesalahannya adalah APIException .

Anda hanya berurusan dengan Model Anda dalam panggilan balik yang sangat diketik ini.

Oleh karena itu, sisa kode Anda hanya tahu tentang Model Anda.

Selain itu, Anda masih dapat menggunakan rute tradisional dan mengembalikan < HttpResponse<T >> yang Dapat Diamati dari API Layanan.

HttpClient adalah API baru yang hadir dengan 4.3, telah memperbarui API dengan dukungan untuk acara kemajuan, deserialisasi json secara default, Interceptors dan banyak fitur hebat lainnya. Lihat lebih lanjut di sini https://angular.io/guide/http

Http adalah API yang lebih lama dan pada akhirnya akan ditinggalkan.

Karena penggunaannya sangat mirip untuk tugas-tugas dasar saya akan menyarankan menggunakan HttpClient karena merupakan alternatif yang lebih modern dan mudah digunakan.