使用哪一个来构建一个模拟 Web 服务来测试 Angular 4 应用程序？
【问题讨论】：
标签： angular angular-httpclient angular2-http
如果您使用的是 Angular 4.3.x 及更高版本，请使用 HttpClientModule 中的 HttpClient 类：
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 是假定的默认值，不再需要显式解析
- 请求后验证和基于刷新的测试框架
今后旧的 http 客户端将被弃用。以下是commit message 和the official docs 的链接。
还要注意旧的http是使用Http类令牌而不是新的HttpClient注入的：
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
BrowserModule,
HttpModule
],
...
class MyService() {
constructor(http: Http) {...}
另外，新的HttpClient 似乎在运行时需要tslib，所以如果你使用SystemJS，你必须安装它npm i tslib 并更新system.config.js：
map: {
...
'tslib': 'npm:tslib/tslib.js',
如果使用 SystemJS，则需要添加另一个映射：
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
【讨论】：
node_modules文件夹并再次运行npm install
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
不想重复，只是换个方式总结一下（新HttpClient中新增的功能）：
我写了一篇文章，其中介绍了旧的“http”和新的“HttpClient”之间的区别。我们的目标是以最简单的方式解释它。
【讨论】：
这是一个很好的reference，它帮助我将我的http 请求切换到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。像这样：
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);
});
我还使用拦截器将我的授权令牌添加到每个请求 reference。
像这样：
@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 一起使用时，您必须在其余代码中使用 .subscribe(x=>...)。
这是因为 ObservableHttpResponseT>> 与 HttpResponse 绑定。
这将http层与您的代码的其余部分紧密结合。
这个库封装了 .subscribe(x => ...) 部分，只通过你的模型暴露数据和错误。
使用强类型回调，您只需在其余代码中处理模型。
该库名为 angular-extended-http-client。
angular-extended-http-client library on GitHub
angular-extended-http-client library on NPM
非常容易使用。
强类型回调是
成功：
失败：
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);
}
回调中返回的 response 和 error 都是强类型的。例如。 response 是 RacingResponse 类型，error 是 APIException。
您只在这些强类型回调中处理您的模型。
因此，您的其余代码只知道您的模型。
另外，您仍然可以使用传统路由并从 Service API 返回 ObservableHttpResponse<T>>。
【讨论】：
HttpClient 是 4.3 附带的新 API，它更新了 API，支持进度事件、默认的 json 反序列化、拦截器和许多其他强大功能。在此处查看更多信息https://angular.io/guide/http
Http 是较旧的 API，最终将被弃用。
由于它们在基本任务中的用法非常相似，因此我建议使用 HttpClient，因为它是更现代且易于使用的替代方案。
【讨论】：