Sự khác biệt giữa HttpModule và HttpClientModule

Nên dùng cái nào để xây dựng một dịch vụ web giả để thử nghiệm ứng dụng Angular 4?

Sử dụng HttpClientlớp từ HttpClientModulenếu bạn đang sử dụng Angular 4.3.x trở lên:

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

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

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

Đây là một phiên bản nâng cấp của httptừ @angular/httpmô-đun với các cải tiến sau đây:

• Thiết bị chặn cho phép logic phần mềm trung gian được chèn vào đường ống
• Đối tượng yêu cầu / phản hồi không thay đổi
• Sự kiện tiến triển cho cả yêu cầu tải lên và phản hồi tải xuống

Bạn có thể đọc về cách thức hoạt động của nó trong hướng dẫn của Người trong cuộc vào các thiết bị đánh chặn và cơ học httpClient trong Angular .

• Nhập, truy cập cơ thể phản hồi đồng bộ, bao gồm hỗ trợ cho các loại cơ thể JSON
• JSON là một mặc định giả định và không còn cần phải được phân tích cú pháp rõ ràng
• Xác minh sau yêu cầu & tuôn ra dựa trên khung thử nghiệm

Đi về phía trước khách hàng http cũ sẽ không được chấp nhận. Dưới đây là các liên kết đến thông điệp cam kết và các tài liệu chính thức .

Cũng lưu ý rằng http cũ đã được chèn bằng Httpmã thông báo lớp thay vì mới HttpClient:

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

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

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

Ngoài ra, HttpClientdường như mới yêu cầu tslibtrong thời gian chạy, vì vậy bạn phải cài đặt nó npm i tslibvà cập nhật system.config.jsnếu bạn đang sử dụng SystemJS:

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

Và bạn cần thêm ánh xạ khác nếu bạn sử dụng SystemJS:

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

Đừng muốn bị lặp đi lặp lại mà chỉ tóm tắt theo cách khác (các tính năng được thêm vào trong httpClient mới):

• Tự động chuyển đổi từ JSON sang một đối tượng
• Định nghĩa kiểu đáp ứng
• Bắn sự kiện
• Cú pháp đơn giản hóa cho các tiêu đề
• Đánh chặn

Tôi đã viết một bài báo, trong đó tôi đề cập đến sự khác biệt giữa "http" cũ và "httpClient" mới. Mục tiêu là giải thích nó theo cách dễ nhất có thể.

Đơn giản chỉ cần về httpClient mới trong Angular

Đây là một tài liệu tham khảo tốt, nó đã giúp tôi chuyển các yêu cầu http của mình sang httpClient

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

Nó so sánh hai về sự khác biệt và đưa ra ví dụ mã.

Đây chỉ là một vài khác biệt mà tôi đã xử lý trong khi thay đổi dịch vụ thành httpclient trong dự án của mình (mượn từ bài viết tôi đã đề cập):

Nhập khẩu

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

Yêu cầu và phân tích phản hồi:

@ góc / 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);
      });

@ góc / chung / 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);
      });

Lưu ý: Bạn không còn phải trích xuất dữ liệu trả về một cách rõ ràng; theo mặc định, nếu dữ liệu bạn nhận được là loại JSON, thì bạn không phải làm gì thêm.

Nhưng, nếu bạn cần phân tích bất kỳ loại phản hồi nào khác như văn bản hoặc blob, thì hãy đảm bảo bạn thêm responseTypeyêu cầu. Thích như vậy:

Tạo yêu cầu GET HTTP với responseTypetùy chọn:

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

Thêm đánh chặn

Tôi cũng đã sử dụng các công cụ chặn để thêm mã thông báo cho ủy quyền của mình cho mọi yêu cầu:

Đây là một tài liệu tham khảo tốt: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

như vậy

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

Đây là một bản nâng cấp khá đẹp!

Có một thư viện cho phép bạn sử dụng HttpClient với các cuộc gọi lại được gõ mạnh .

Dữ liệu và lỗi có sẵn trực tiếp thông qua các cuộc gọi lại này.

Khi bạn sử dụng HttpClient với Observable, bạn phải sử dụng .subscribe (x => ...) trong phần còn lại của mã.

Điều này là do < >> có thể quan sátHttpResponseT được gắn với httpResponse .

Đây chặt cặp vợ chồng các lớp http với phần còn lại của mã của bạn .

Thư viện này đóng gói phần .subscribe (x => ...) và chỉ hiển thị dữ liệu và lỗi thông qua Mô hình của bạn.

Với các cuộc gọi lại được gõ mạnh, bạn chỉ phải xử lý các Mô hình của mình trong phần còn lại của mã.

Thư viện được gọi là angular-Extended-http-client .

thư viện angular-Extended-http-client trên GitHub

thư viện angular-Extended-http-client trên NPM

Rất dễ sử dụng.

Sử dụng mẫu

Các cuộc gọi lại được gõ mạnh là

Sự thành công:

• Có thể quan sát < T>
• IObservableHttpResponse
• IObservableHttpCustomResponse < T>

Sự thất bại:

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

Thêm gói vào dự án của bạn và trong mô-đun ứng dụng của bạn

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

và trong nhập khẩu @NgModule

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Mô hình của bạn

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

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

Dịch vụ của bạn

Trong Dịch vụ của bạn, bạn chỉ cần tạo thông số với các loại gọi lại này.

Sau đó, chuyển chúng cho phương thức get của 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);
    }
}

Thành phần của bạn

Trong Thành phần của bạn, Dịch vụ của bạn được tiêm và API getRaceInfo được gọi như bên dưới.

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

  }

Cả hai, phản hồi và lỗi được trả lại trong các cuộc gọi lại được gõ mạnh. Ví dụ. phản hồi là loại RacingResponse và lỗi là APIException .

Bạn chỉ đối phó với các Mô hình của mình trong các cuộc gọi lại được gõ mạnh này.

Do đó, phần còn lại của mã của bạn chỉ biết về Mô hình của bạn.

Ngoài ra, bạn vẫn có thể sử dụng tuyến truyền thống và trả lại < HttpResponse<T >> có thể quan sát được từ API dịch vụ.

HttpClient là một API mới đi kèm với 4.3, nó đã cập nhật API với sự hỗ trợ cho các sự kiện tiến bộ, khử lưu lượng json theo mặc định, Bộ chặn và nhiều tính năng tuyệt vời khác. Xem thêm tại đây https://angular.io/guide/http

Http là API cũ hơn và cuối cùng sẽ không được chấp nhận.

Vì cách sử dụng của chúng rất giống nhau cho các tác vụ cơ bản, tôi sẽ khuyên bạn nên sử dụng HTTPClient vì đây là cách thay thế hiện đại và dễ sử dụng hơn.