详解使用angular的HttpClient搭配rxjs


Posted in Javascript onSeptember 01, 2017

一、原Http使用总结

使用方法

1.在根模块或核心模块引入HttpModule

即在AppModule或CoreModule中引入HttpModule:

import { HttpModule } from '@angular/http';
@NgModule({
 import: [ HttpModule ]
 // ...
})
AppModule {}

2.在使用的地方注入Http服务

import { Http } from '@angular/http';
// ...
constructor(
 private http: Http
) {}
ngOnInit() {
 this.http.get(`url`).subscribe((res) => {
// 成功回调
 }, (err) => {
// 失败回调
 });
}
// ...

3.使用可选参数

 若想在请求中添加特定的头部或者身体,就需要配置请求的可选参数:

import { Http, Header } from '@angular/http';
// ...
this.http.delete(`url`, {headers: new Header(), body: { } }).subscribe(...);
// ...

缺陷

已知缺陷之一为不支持文件传输,如果想要写一个文件上传的客户端,就只能使用JS原生的XMLHttpRequest对象,然后自己封装上rxjs得到一个较通用的文件上传服务,可以参考 ngx-uploader。

另一个不能算缺陷的缺陷是Http请求得到的响应结果必须手动执行json()以得到json格式的结果。

二、改用HttpClient

HttpClient能力在angular 4.3版本开始引入在@angular/common/http中

使用方法

基本使用方法与原Http服务类似,先引入HttpClientModule,然后注入HttpClient服务使用:

import { HttpClientModule } from '@angular/common/http';
// ...
@NgModule({
 import: [ HttpClientModule ]
})
// ...
import { HttpClient } from '@angular/common/http';
// ...
constructor(
 private http: HttpClient
) {}
// ...
this.http.get('url').subscribe((res) => {
 // 成功回调
}, (err) => {
 // 失败回调
});
// ...

添加额外头部等信息的话类似原Http服务,引入相关的变量后填入第二个可选参数即可。

改进与加强

1.支持更多类型的请求,比如更改可选参数的responseType值可改为直接请求text内容
2.不再需要手动调用json()来将结果转为json格式,订阅到的结果已经是body且转为了json(请求text的话直接就是text内容)。
3.支持监听请求进度(可用于文件上传)。
4.添加了拦截器能力,用于预设请求规则和响应预处理。

缺陷

已知的一个小缺陷是,delete请求不能再添加body作为可选参数了,这个略尴尬,难道批量删除也得乖乖把参数拼到url中。。。

三、拦截器

本文暂不讨论文件上传以及请求进度的监听能力,可以查看官网的相关内容,本文主要来讲拦截器的简单使用。

给应用注入拦截器的效果是,所有的HttpClient发起的请求都将执行这个拦截器,类似Node中的中间件。且无论是请求之前的预处理还是得到响应后的预处理都能做到。

笔者想到的第一个用处就是不再需要写一个自己的Http服务来代执行angular的Http服务了,以往如果想要给应用的所有请求都添加比如认证功能的请求头的话,比较好的办法就是自己建立一个MyHttp服务来代为调用Http方法,并在请求回调中添加统一的结果处理。

拦截器属于特殊服务,实现了HttpInterceptor类:

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 return next.handle(req);
 }
}

编辑好拦截器后需要注入到根模块中:

import {NgModule} from '@angular/core';
import {HTTP_INTERCEPTORS} from '@angular/common/http';

@NgModule({
 providers: [{
 provide: HTTP_INTERCEPTORS,
 useClass: MyInterceptor,
 multi: true,
 }],
})
export class AppModule {}

预处理请求

所有工作都在拦截器中的intercept方法中进行,如果要给所有请求加一个认证头部,可以操作其中的req参数,注意req参数为只读的,必须执行其clone方法得到副本来操作,处理完的副本通过next参数发射出去即可:

public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 let authInfo = {token: 'testtoken', admin: 'testadmin'};
 const authReq = req.clone({
  headers: req.headers
  .set('Authorization', authInfo.token || '')
  .set('Admin', authInfo.admin || '')
  .set('Content-Type', 'application/json;charset=UTF-8')
 });
 return next.handle(authReq);
}

这样实际使用请求时可以直接使用HttpClient,所有请求都会实现添加配置好的头部信息。

响应预处理

请求得到结果后,往往需要对结果进行一些判断,比如某些错误是请求本身的错误,这些错误会直接抛出到rxjs的error流中,某些请求本身是成功的,但是是属于一些服务器逻辑给出的错误,这类错误如果不做处理是会被认为是成功的请求而直接next到成功回调的,这会导致最终订阅请求时,错误的回调要做错误处理,成功回调中也存在需要做错误处理,感觉成功还得分为成功地成功和成功地失败,很尴尬:

someReq().subscribe((res) => {
 if (res.state) {
 // 真正成功
 } else {
 // 还是失败
 }
}, (err) => {
 // 失败
});

通过拦截器可以对请求结果进行重新整理,保证成功回调必然成功,失败回调必然失败:

return next.handle(authReq).map((event) => {
 if (event instanceof HttpResponse) {
 switch (event.status) {
  case 200:
  if (event.body['state']) {
  let newEvent = event.clone({body: event.body['data']});
  return newEvent;
  } else {
  throw event.body['msg'];
  }
  case 401:
  this.storage.remove('auth_token');
  this.router.navigate(['/login']);
  default:
  throw `【${event.status}】【${event.statusText}】`;
 }
 }
 return event;
});

响应预处理的一句话总结就是操作intercept方法返回的next.handle(req),使用rxjs的map操作符进行映射。

详解使用angular的HttpClient搭配rxjs

四、搭配rxjs

rxjs是angular严重依赖的一个大坑,初次接触会被其创建和订阅这种使用方式搭配一大堆眼花缭乱的操作符弄得一脸懵逼。

创建-订阅的请求方式

原Http和新的HttpClient两个服务流严重依赖了rxjs,请求的发起返回的是一个Observable对象,其定义好后并不会直接发起请求,真正发起请求是在执行其subscribe方法的时候,此方法接收三个参数,分别是成功回调、失败回调和完成回调。

Promise的套路是请求在定义(调用)的时候就发起了,然后迎来的是一连串的then()和catch()。可以从catch中resolve到then,或者从then中reject到catch。

rxjs的套路则是先创建出一个观察者对象(Observable),可以用许多操作符定义许多规则,比如个人感觉很接近then的map操作符,以及接近catch的catch操作符。可以从map操作符中直接throw到错误回调,或者在catch操作符中捕捉错误并返回新的成功的流。这一切都不会触发这个请求,只有最终subscribe()的时候,才会真正执行整个请求,并在三种回调中体现。

详解使用angular的HttpClient搭配rxjs

对于rxjs的学习强烈推荐 Rxjs 5 ultimate 简直胜看十篇博。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
JS中关于正则的巧妙操作
Aug 31 #Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 #Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 #Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 #Javascript
vue实现全选和反选功能
Aug 31 #Javascript
浅谈Vue 初始化性能优化
Aug 31 #Javascript
Vue keep-alive实践总结(推荐)
Aug 31 #Javascript
You might like
php fread读取文件注意事项
2016/09/24 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
JavaScript Split()方法
2015/12/18 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
10款最好的Python开发编辑器
2019/07/03 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
Numpy数组的广播机制的实现
2020/11/03 Python
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
给老婆的搞笑检讨书
2014/01/12 职场文书
硕士生工作推荐信
2014/03/07 职场文书
婚礼司仪主持词
2014/03/14 职场文书
投资建议书模板
2014/05/12 职场文书
服务标语口号
2014/07/01 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
家庭经济困难证明
2015/06/23 职场文书
领导欢送会主持词
2015/07/06 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
高中同学会致辞
2015/08/01 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL