Angular 5:HttpClient的基本用法

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

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

安装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();
// 发次第二次请求

版权声明:著作权归作者所有。

相关推荐

Rxjs expand的用法分析

Rxjs的expand()函数声明:public expand(project: function(value: T, index: number), concurrent: number, scheduler: Scheduler): Observable expand()会递归调用project函数,project函数把源值映射为一个Observable,每次递归

Angular 5配置使用service-worker

Angular 5实现了一个适用于Angular应用的Service Worker,Angular CLI 1.6也添加了对service worker的支持。使用Angular CLI对应用添加service worker的支持分两种情况:新项目应用中添加service worker在已有项目中添加service&n

Swift 4 Codable协议 - 基本用法

Swift 4新增了Codable协议,它是一个组合协议,包含Encodable和Decodable两个协议。代码定义如下:/// A type that can convert itself into and out of an external repre

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更

Kotlin:数组的基本操作

Kotlin使用Array类来表示数组,构造函数为:<init> Array(size: Int, init: (Int) -> T) size:数组大小init:初始化数组创建数组Kotlin提供了几种方法方便我们创建数组,包括:构造函数,标准库提供的arrayOf, arrayOfNulls 和emptyArray等 。构造函数// 创建 一个值

Angular4使用Rxjs5共享Http请求返回的结果数据

在使用Angular开发的单页面应用里,有时需要处理这种场景:使用http请求某个数据,数据请求成功后需要把数据更新到多个组件里。也就是说,有多个observer(观察者)对http请求数据返回的Observable订阅。getDta() {     return this.http.get('/dataUrl').map(res&nbs