HttpModule和HttpClientModule之间的差异

Question

使用哪一个来构建模拟 Web 服务来测试 Angular 4 应用？

Answer 1

这是一个很好的参考，它帮助我将我的< code>http请求切换到< code>httpClient。

它根据差异比较了两者，并提供了代码示例。

这只是我在项目中将服务更改为httpclient时处理的一些差异(借用我提到的文章) :

import {HttpModule} from '@angular/http';
import {HttpClientModule} from '@angular/common/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);
      });

 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类型，那么您不必做任何额外的事情。

但是，如果需要解析任何其他类型的响应，如文本或blob，请确保在请求中添加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);
      });

我还使用拦截器为每个请求、引用添加我的授权令牌。

像这样：

@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 2

不想重复，只是用其他方式总结（新HttpClient中添加的功能）：

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

我写了一篇文章，其中我介绍了旧“http”和新“Http客户端”之间的区别。目标是以最简单的方式解释它。

浅谈Angular中的新HttpClient

Answer 3

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

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

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

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

它是 http 的升级版本，从 @angular/http 模块进行了以下改进：

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

您可以在内幕指南中阅读有关其工作原理的信息，了解拦截器和角度中的 Http 客户端机制。

• 类型化、同步响应正文访问，包括对 JSON 正文类型的支持
• JSON 是假定的默认值，不再需要显式解析
• 请求后验证

今后，旧的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',