角度4中的HTTP和HTTPClient之间的区别？

Question

我想知道使用哪一个来构建模拟Web服务来测试Angular程序？

Answer 1

如果您使用的是Angular 4.3.x及更高版本，请使用HttpClient中的HttpClientModule类：

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

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

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

它是来自http模块的@angular/http的升级版本，具有以下改进：

  

  
• 拦截器允许将中间件逻辑插入管道
  
• 不可变的请求/响应对象
  
• 请求上传和响应下载的进度事件
  

您可以在Insider’s guide into interceptors and HttpClient mechanics in Angular中了解它的工作原理。

  

  
• 键入的同步响应正文访问，包括对JSON正文类型的支持
  
• JSON是假定的默认值，不再需要显式解析
  
• 请求后验证＆amp;基于冲洗的测试框架
  

前进旧的http客户端将被弃用。以下是指向commit message和the official docs的链接。

还要注意使用Http类令牌而不是新HttpClient注入旧的http：

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',

Answer 2

不想重复，但只是以其他方式总结：

• 从JSON自动转换为对象
• 响应类型定义
• 事件解雇
• 标题的简化语法
• 拦截

我写了一篇文章，在那里我介绍了旧的＆＃34; http＆＃34;和新的＆＃34; HttpClient＆＃34;。目标是以最简单的方式解释它。

Simply about new HttpClient in Angular

Answer 3

这是一个很好的参考，它帮助我将我的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的类型，那么您不必执行任何额外操作。

但是，如果您需要解析任何其他类型的响应，例如text或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);
    }
}

这是一个非常好的升级！

Answer 4

有一个库可让您将HttpClient与强类型的回调一起使用。

数据和错误可通过这些回调直接获得。

将HttpClient与Observable一起使用时，必须在其余代码中使用 .subscribe（x => ...）。

这是因为 Observable <HttpResponse <T >> 与 HttpResponse 相关。

这将 http层与其余代码紧密结合。

该库封装了 .subscribe（x => ...）部分，并仅通过模型公开数据和错误。

使用强类型的回调，您只需在其余代码中处理模型。

该库称为 angular-extended-http-client 。

angular-extended-http-client library on GitHub

angular-extended-http-client library on 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 的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 >>。

Answer 5

HttpClient 是4.3附带的新API，它更新了API，支持进度事件，默认情况下的json反序列化，拦截器和许多其他强大功能。在此处查看更多 https://angular.io/guide/http

Http 是较旧的API，最终将不推荐使用。

由于它们的用法与基本任务非常相似，因此我建议使用HttpClient，因为它是更现代且易于使用的替代方案。