ความแตกต่างระหว่าง HttpModule และ HttpClientModule

สิ่งใดที่จะใช้ในการสร้างบริการเว็บจำลองเพื่อทดสอบแอป Angular 4

ใช้HttpClientคลาสจากHttpClientModuleหากคุณใช้ Angular 4.3.x ขึ้นไป:

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

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

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

เป็นรุ่นอัพเกรดhttpจาก@angular/httpโมดูลที่มีการปรับปรุงดังต่อไปนี้:

• ตัวรับอนุญาตอนุญาตให้มิดเดิลแวร์ตรรกะถูกแทรกลงในไปป์ไลน์
• วัตถุคำขอ / ตอบกลับที่ไม่เปลี่ยนรูป
• เหตุการณ์ความคืบหน้าสำหรับทั้งการอัปโหลดคำขอและการตอบสนองการดาวน์โหลด

คุณสามารถอ่านข้อมูลเกี่ยวกับวิธีการทำงานในคู่มือ Insider เข้าไปไล่และ HttpClient กลศาสตร์ในเชิงมุม

• การเข้าถึงส่วนเนื้อหาการตอบสนองแบบซิงโครนัสรวมถึงการสนับสนุนชนิดเนื้อหาของ JSON
• JSON เป็นค่าเริ่มต้นที่สันนิษฐานและไม่จำเป็นต้องแยกวิเคราะห์อย่างชัดเจน
• โพสต์คำขอตรวจสอบ & กรอบการทดสอบตามล้าง

การส่งต่อไคลเอ็นต์ HTTP เก่าจะถูกคัดค้าน นี่คือลิงค์ไปยังข้อความยืนยันและเอกสารอย่างเป็นทางการ

โปรดทราบด้วยว่า http เก่า ๆ ถูกใช้งานโดยใช้Httpโทเค็นของชั้นเรียนแทนของใหม่HttpClient:

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

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

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

นอกจากนี้HttpClientดูเหมือนว่าใหม่จะต้องใช้tslibในรันไทม์ดังนั้นคุณต้องติดตั้ง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',

ไม่ต้องการที่จะทำซ้ำ แต่เพียงเพื่อสรุปในทางอื่น (เพิ่มคุณสมบัติใน HttpClient ใหม่):

• การแปลงอัตโนมัติจาก JSON เป็นวัตถุ
• นิยามชนิดการตอบกลับ
• เหตุการณ์ยิง
• ไวยากรณ์ที่ง่ายขึ้นสำหรับส่วนหัว
• interceptors

ฉันเขียนบทความที่ฉันครอบคลุมความแตกต่างระหว่าง "http" เก่ากับใหม่ "HttpClient" เป้าหมายคือการอธิบายในวิธีที่ง่ายที่สุดเท่าที่จะทำได้

เพียงเกี่ยวกับ HttpClient ใหม่ในเชิงมุม

นี่เป็นการอ้างอิงที่ดีมันช่วยให้ฉันเปลี่ยนการร้องขอ http เป็น httpClient ได้

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 คุณจะไม่ต้องทำอะไรเพิ่มเติม

แต่ถ้าคุณต้องการแยกประเภทการตอบสนองอื่น ๆ เช่นข้อความหรือหยดแล้วให้แน่ใจว่าคุณเพิ่มresponseTypeในการร้องขอ ชอบมาก

ทำคำขอ GET HTTP ด้วยresponseTypeตัวเลือก:

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

การเพิ่ม Interceptor

ฉันยังใช้ตัวดักเพื่อเพิ่มโทเค็นสำหรับการอนุญาตของฉันในทุกคำขอ:

นี่เป็นข้อมูลอ้างอิงที่ดี: 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);
    }
}

มันเป็นการอัพเกรดที่ดีทีเดียว!

มีห้องสมุดที่ให้คุณใช้ HttpClient กับการโทรกลับที่พิมพ์ได้อย่างมาก

ข้อมูลและข้อผิดพลาดสามารถใช้ได้โดยตรงผ่านการเรียกกลับเหล่านี้

เมื่อคุณใช้ HttpClient ด้วย Observable คุณจะต้องใช้. สมัครสมาชิก (x => ... )ในส่วนที่เหลือของรหัสของคุณ

นี่เป็นเพราะสังเกตได้HttpResponse<< T>>จะเชื่อมโยงกับHttpResponse

นี้แน่นคู่ชั้น httpกับส่วนที่เหลือของรหัสของคุณเหลือ

ห้องสมุดนี้สรุป.. สมัครสมาชิก (x => ... )และแสดงเฉพาะข้อมูลและข้อผิดพลาดผ่านแบบจำลองของคุณ

ด้วยการโทรกลับที่พิมพ์อย่างรุนแรงคุณจะต้องจัดการกับนางแบบของคุณในส่วนที่เหลือของรหัสของคุณ

ไลบรารีเรียกว่าangular-Extended-http-clientเชิงมุมขยาย-http

ไลบรารี่เชิงขยาย http-client บน GitHub

ไลบรารี่เชิงขยาย http-client บน NPM

ใช้งานง่ายมาก

ตัวอย่างการใช้งาน

การเรียกกลับที่พิมพ์อย่างมากคือ

ความสำเร็จ:

• 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

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

ส่วนประกอบของคุณ

ใน Component ของคุณ Service ของคุณจะถูกฉีดและgetRaceInfo API เรียกว่าดังที่แสดงด้านล่าง

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

  }

ทั้งการตอบกลับและข้อผิดพลาดที่ส่งคืนในการเรียกกลับถูกพิมพ์อย่างมาก เช่น. การตอบสนองเป็นประเภทRacingResponseและข้อผิดพลาดเป็นAPIException

คุณจัดการกับรุ่นของคุณในการโทรกลับที่พิมพ์อย่างรุนแรงเหล่านี้เท่านั้น

ดังนั้นรหัสที่เหลือของคุณจะรู้เกี่ยวกับรุ่นของคุณเท่านั้น

นอกจากนี้คุณยังสามารถใช้เส้นทางดั้งเดิมและส่งคืน Observable < HttpResponse<T >> จาก Service API

HttpClientเป็น API ใหม่ที่มาพร้อมกับ 4.3 มันได้รับการอัปเดต API ด้วยการสนับสนุนกิจกรรมความคืบหน้าการดีซีเรียลไลเซชัน json โดยค่าเริ่มต้น Interceptors และคุณสมบัติที่ยอดเยี่ยมอื่น ๆ อีกมากมาย ดูเพิ่มเติมได้ที่นี่https://angular.io/guide/http

Httpเป็น API ที่เก่ากว่าและจะเลิกใช้ในที่สุด

เนื่องจากการใช้งานของพวกเขาคล้ายกันมากกับงานพื้นฐานฉันขอแนะนำให้ใช้ HttpClient เนื่องจากเป็นทางเลือกที่ทันสมัยและใช้งานง่ายกว่า