HttpModule ve HttpClientModule arasındaki fark

Angular 4 uygulamasını test etmek için sahte bir web hizmeti oluşturmak için hangisi kullanılır?

Açısal 4.3.x ve üstünü kullanıyorsanız , HttpClientsınıfını kullanın HttpClientModule:

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

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

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

Bu yükseltilmiş versiyonu httpdan @angular/httpaşağıdaki iyileştirmeler ile modül:

• Durdurucular, ara katman mantığının boru hattına eklenmesine izin verir
• Değişmeyen istek / yanıt nesneleri
• Hem yükleme yükleme hem de yanıt indirme için ilerleme olayları

Nasıl çalıştığını Insider'ın Angular'daki önleme ve HttpClient mekaniği kılavuzunda okuyabilirsiniz .

• JSON gövde türleri desteği dahil, yazılan, senkron yanıt gövdesi erişimi
• JSON varsayılan bir varsayımdır ve artık açıkça ayrıştırılmasına gerek yoktur
• İstek sonrası doğrulama ve gömme tabanlı test çerçevesi

İleride eski http istemcisi kullanımdan kaldırılacak. İşte bağlantılarıdır taahhüt mesajla ve resmi belgeler .

Ayrıca eski http'nin Httpyeni yerine sınıf belirteci kullanılarak enjekte edildiğine dikkat edin HttpClient:

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

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

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

Ayrıca, yeni HttpClientgerektirecek gibi görünüyor tslibBunu yüklemek zorunda, çalışma zamanı içinde npm i tslibve güncelleştirme system.config.jskullanmakta iseniz SystemJS:

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

SystemJS kullanıyorsanız başka bir eşleme eklemeniz gerekir:

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

Tekrarlayan olmak istemiyorum, sadece başka bir şekilde özetlemek (yeni HttpClient'te eklenen özellikler):

• JSON'dan nesneye otomatik dönüşüm
• Yanıt türü tanımı
• Olay ateşleme
• Üstbilgiler için basitleştirilmiş sözdizimi
• Müdahale

Eski "http" ile yeni "HttpClient" arasındaki farkı ele aldığım bir makale yazdım. Amaç, bunu mümkün olan en kolay şekilde açıklamaktı.

Angular'daki yeni HttpClient hakkında

Bu iyi bir referans, http isteklerimi httpClient olarak değiştirmeme yardımcı oldu

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

İkisini farklılıklar açısından karşılaştırır ve kod örnekleri verir.

Bu, projemdeki hizmetleri httpclient olarak değiştirirken ele aldığım birkaç farklılık (bahsettiğim makaleden borçlanma):

içe

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

Yanıt isteme ve ayrıştırma:

@ Açısal / 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);
      });

@ Açısal / ortak / 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);
      });

Not: Artık döndürülen verileri açıkça çıkarmanız gerekmez; varsayılan olarak, geri aldığınız veriler JSON türüyse, fazladan bir şey yapmanız gerekmez.

Ancak, metin veya blob gibi başka bir yanıt türünü ayrıştırmanız gerekirse responseType, isteği istekte eklediğinizden emin olun . Şöyle ki:

GET HTTP isteğini şu responseTypeseçenekle yapma :

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

Durdurucu Ekleme

Ayrıca, her talebe yetkim için jeton eklemek için durdurucuları kullandım:

Bu iyi bir referanstır: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

şöyle:

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

Onun oldukça güzel bir yükseltme!

HttpClient'ı güçlü bir şekilde yazılmış geri aramalarla kullanmanızı sağlayan bir kütüphane var .

Verilere ve hataya doğrudan bu geri aramalar aracılığıyla erişilebilir.

HttpClient'i Observable ile kullandığınızda , kodunuzun geri kalanında .subscribe (x => ...) kullanmanız gerekir .

Bunun nedeni gözlemlenebilir < HttpResponse< T>> bağlıdır HttpResponse .

Bu sıkıca çiftler http tabakası ile Kodunuzun geri kalanında .

Bu kütüphane .subscribe (x => ...) parçasını içine alır ve Modelleriniz aracılığıyla yalnızca veri ve hatayı ortaya koyar.

Güçlü yazılan geri aramalarla, kodlarınızla birlikte yalnızca Modellerinizle uğraşmanız gerekir.

Kütüphaneye açısal-genişletilmiş-http-istemci denir .

GitHub'da açısal-genişletilmiş-http-istemci kitaplığı

NPM üzerinde açısal-genişletilmiş-http-istemci kütüphanesi

Kullanımı çok kolay.

Örnek kullanım

Güçlü yazılan geri çağrılar

Başarı:

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

Başarısızlık:

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

Projenize ve uygulama modülünüze paket ekleyin

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

ve @NgModule ithalatında

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Modelleriniz

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

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

Servisiniz

Hizmetinizde, yalnızca bu geri arama türleriyle parametreler oluşturursunuz.

Ardından, bunları HttpClientExt 's get yöntemine iletin .

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

Bileşeniniz

Bileşeninize Hizmetiniz enjekte edilir ve getRaceInfo API'si aşağıda gösterildiği gibi çağrılır.

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

  }

Hem geri çağrılarda döndürülen yanıt hem de hata güçlü bir şekilde yazılmıştır. Örneğin. tepki türüdür RacingResponse ve hata olduğunu APIException .

Modellerinizle yalnızca bu güçlü yazılan geri aramalarda ilgilenirsiniz.

Bu nedenle, kodunuzun geri kalanı yalnızca Modellerinizi bilir.

Ayrıca, geleneksel rotayı kullanmaya devam edebilir ve Hizmet API'sından Gözlenebilir < HttpResponse<T >> değerini döndürebilirsiniz .

HttpClient , 4.3 ile gelen yeni bir API'dir, ilerleme olayları, varsayılan olarak json serileştirme, Durdurucular ve diğer birçok harika özellik için API'leri güncelledi. Buradan daha fazlasını görün https://angular.io/guide/http

Http eski API'dir ve sonunda kullanımdan kaldırılacaktır.

Kullanımları temel görevler için çok benzer olduğundan, daha modern ve kullanımı kolay bir alternatif olduğu için HttpClient kullanmanızı tavsiye ederim.