详解使用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 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python版微信跳一跳游戏辅助
2018/01/11 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python中的__init__作用是什么
2020/06/09 Python
Python类及获取对象属性方法解析
2020/06/15 Python
Python远程方法调用实现过程解析
2020/07/28 Python
python实现移动木板小游戏
2020/10/09 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
简易版租房协议书范本
2014/10/13 职场文书
国家助学金感谢信
2015/01/21 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript