Angular 5：HttpClient的基本用法

Angular 4.3引入了新的用于http请求的接口HttpClient。它旨在替换之前版本的接口Http。有以下新特性：

对响应的body做类型检查
默认返回的是JSON对象，不再需要使用json()显式解析返回的数据
支持拦截器
支持进度事件
请求后验证和基于刷新的测试框架

安装HttpClientModule

HttpClient属于@angular/common/http包的模块HttpClientModule。使用HttpClient需要导入HttpClientModule。


import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

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

@NgModule({
 imports: [
  BrowserModule,
  //在BrowserModule之后导入HttpClientModule
  HttpClientModule,
 ],
})
export class AppModule {}

请求JSON数据

使用get请求/api/items的JSON数据。

JSON格式：

{
  "results": [
    "Item 1",
    "Item 2",
  ]
}

示例组件

@Component(...)
export class MyComponent implements OnInit {

 results: string[];

 // 注入HttpClient
 constructor(private http: HttpClient) {}

 ngOnInit(): void {
 
  this.http.get('/api/items').subscribe(data => {
      //此处不需要使用data.json()来解析响应数据
   this.results = data['results'];
  });
 }
}

由于HttpClient默认使用JSON格式，所以在处理响应数据不再需要显式解析JSON。

类型检查

在上面的例子里没有直接使用data.results获取data的results属性的值，而是使用下标语法data["results"]。这是由于http响应不知道data的数据结构。

如果需要对返回的数据做类型检查，可是使用泛型对get请求指定响应数据类型。

interface ItemsResponse {
  results: string[];
}

例子里的get请求改为

http.get<ItemsResponse>('/api/items').subscribe(data => {
  this.results = data.results;
});

获取完整的response

上面的例子获取的是返回的JSON数据，如果需要获取整个respons，包括响应头信息等，可以对get函数指定

http
  .get<MyJsonData>('/data.json', {observe: 'response'})
  .subscribe(resp => {
    console.log(resp);
    console.log(resp.headers.get('X-Custom-Header'));
    console.log(resp.body.someField);
  });

response.body就是上面例子里的data，也是一个JSON对象。

错误处理

http请求失败会返回一个HttpErrorResponse：

http
 .get<ItemsResponse>('/api/items')
 .subscribe(
  data => {...},
  (err: HttpErrorResponse) => {
   if (err.error instanceof Error) {
    console.log('An error occurred:', err.error.message);
   } else {
    console.log(err);
    console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
   }
  }
 );

我们也可以使用rxjs的retry()重试来处理错误：

import 'rxjs/add/operator/retry';
...
http
  .get<ItemsResponse>('/api/items')
  // 最大重试次数设定为3
  .retry(3)
  // 
  .subscribe(...);

请求非JSON数据

HttpClient返回的数据默认为JSON对象。可以使用是非JSON对象：

http
  .get('/textfile.txt', {responseType: 'text'})
  // 返回的数据类型为string
  .subscribe(data => console.log(data));

Post请求

post请求和get类似，同样有subscribe函数，body默认为json对象：

const body = {name: 'Brad'};

http
  .post('/api/developers/add', body)
  .subscribe(...);

添加请求头信息

可以使用headers设置请求头信息：

http
  .post('/api/items/add', body, {
    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
  })
  .subscribe();

添加Url参数

使用params给Url添加参数：

http
  .post('/api/items/add', body, {
    params: new HttpParams().set('id', '3'),
  })
  .subscribe();

注意

需要注意的是，所有HttpClient返回的Observable都为冷对象。返回Observable并不意味者发起了请求，只有对用subscrib函数时才会真正发起http请求。对Observable调用多次subscribe函数，就会发起多次请求。

const req = http.post('/api/items/add', body);
// 此时没有发起请求
req.subscribe();
// 发次第一次请求
req.subscribe();
// 发次第二次请求

秒客网