Angular6封装http请求的步骤详解


Posted in Javascript onAugust 13, 2018

最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块。

之前使用的ajax库是axios,可以设置baseurl,公共头部;集中捕捉错误等,由于Angular6的依赖注入机制,是不能通过直接修改http模块暴露的变量来封装的,但是通过官方文档我们知道可以通过拦截器(HttpInterceptor)来实现这一功能。

拦截器可以拦截请求,也可以拦截响应,那么通过拦截请求就可以实现 设置baseurl,公共头部;而通过拦截响应就可以实现 集中捕获错误 。废话不多说,上代码吧。

第一步:准备工作,导入 HttpClientModule

在app.module.ts中导入 HttpClientModule,然后在imports数组中将 HttpClientModule 加入到 BrowserModule 之后,具体代码为:

import { HttpClientModule } from '@angular/common/http';
@NgModule({
 imports: [
 BrowserModule,
 // import HttpClientModule after BrowserModule.
 HttpClientModule,
 ],
 declarations: [
 AppComponent,
 ],
 bootstrap: [ AppComponent ]
})

第二步:新建有关拦截器的文件

在app文件夹下新建http-interceptors文件夹,在其内新建base-interceptor.ts,index.ts两个文件。其中,base-interceptor.ts是用于设置拦截器的注入器文件,index.ts则为扩展拦截器的提供商。

### base-interceptor.ts
import { Injectable } from '@angular/core';
import {
 HttpEvent, HttpInterceptor, HttpHandler, HttpRequest,
 HttpErrorResponse
} from '@angular/common/http';
import { throwError } from 'rxjs'
import { catchError, retry } from 'rxjs/operators';
/*设置请求的基地址,方便替换*/
const baseurl = 'http://localhost:8360';
@Injectable()
export class BaseInterceptor implements HttpInterceptor {
 constructor() {}
 intercept(req, next: HttpHandler) {
 let newReq = req.clone({
  url: req.hadBaseurl ? `${req.url}` : `${baseurl}${req.url}`,
 });
 /*此处设置额外的头部,token常用于登陆令牌*/
 if(!req.cancelToken) {
  /*token数据来源自己设置,我常用localStorage存取相关数据*/
  newReq.headers =
  newReq.headers.set('token', 'my-new-auth-token')
 }
 // send cloned request with header to the next handler.
 return next.handle(newReq)
  .pipe(
  /*失败时重试2次,可自由设置*/
  retry(2),
  /*捕获响应错误,可根据需要自行改写,我偷懒了,直接用的官方的*/
  catchError(this.handleError)
  )
 }
 private handleError(error: HttpErrorResponse) {
 if (error.error instanceof ErrorEvent) {
  // A client-side or network error occurred. Handle it accordingly.
  console.error('An error occurred:', error.error.message);
 } else {
  // The backend returned an unsuccessful response code.
  // The response body may contain clues as to what went wrong,
  console.error(
  `Backend returned code ${error.status}, ` +
  `body was: ${error.error}`);
 }
 // return an observable with a user-facing error message
 return throwError(
  'Something bad happened; please try again later.');
 };
}
### index.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { BaseInterceptor } from './base-interceptor';
/** Http interceptor providers in outside-in order */
export const httpInterceptorProviders = [
 { provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: true },
];
/*
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

通过克隆修改 req 对象即可拦截请求,而操作 next.handle(newReq) 的结果即可拦截响应。如果需要修改,可直接扩展 base-interceptor.ts或 参考 base-interceptor.ts 文件新建其他文件,然后在 index.ts 中正确引入该拦截器,并将其添加到 httpInterceptorProviders 数组中即可。

第三步:注册提供商

在app.module.ts中加入以下代码:

import { httpInterceptorProviders } from './http-interceptors/index'
@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 HttpClientModule
 ],
 providers: [
 httpInterceptorProviders
 ],
 bootstrap: [AppComponent]
})

第四步,提取baseurl

为了方便后台修改baseurl,我们可以将baseurl提取为全局变量,在index.html中进行设置,

# index.html 增加
<script>
 window.baseurl = "http://localhost:8360"
</script>
# base-interceptor.ts 修改
const baseurl = window.baseurl;

这样一来,如果后台要修改的话,只需修改index.html中的变量即可,无需再次编译。还有,像这些后期可能更改的变量,建议是直接放在index.html中,因为缓存的原因,如果放在js文件中再引入的话,文件并不能及时更新或是每次都需要更改文件名,会导致不必要的麻烦。

至此,Angular6的http模块封装已经基本完成,如果有需要可以自行扩展,可参考第二步。

ps:下面看下vue与angular的区别

1.vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架。

2.vue的双向邦定是基于ES5 中的 getter/setter来实现的,而angular而是由自己实现一套模版编译规则,需要进行所谓的“脏”检查,vue则不需要。因此,vue在性能上更高效,但是代价是对于ie9以下的浏览器无法支持。

3.vue需要提供一个el对象进行实例化,后续的所有作用范围也是在el对象之下,而angular而是整个html页面。一个页面,可以有多个vue实例,而angular好像不是这么玩的。

4.vue真的很容易上手,学习成本相对低,不过可以参考的资料不是很丰富,官方文档比较简单,缺少全面的使用案例。高级的用法,需要自己去研究源码,至少目前是这样。

总结

以上所述是小编给大家介绍的Angular6封装http请求的步骤详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Node调试工具JSHint的安装及配置教程
May 27 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
seajs下require书写约定实例分析
May 16 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
vue动态绑定style样式
Apr 20 Vue.js
解决angularjs中同步执行http请求的方法
Aug 13 #Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 #Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 #Javascript
angularjs $http调用接口的方式详解
Aug 13 #Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 #Javascript
vue实现文件上传功能
Aug 13 #Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 #Javascript
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
繁简字转换功能
2006/07/19 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
Prototype框架详解
2015/11/25 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
python快速查找算法应用实例
2014/09/26 Python
django的登录注册系统的示例代码
2018/05/14 Python
python实现内存监控系统
2021/03/07 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
后勤自我鉴定
2013/10/13 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
英语邀请函范文
2015/02/02 职场文书
开学典礼致辞
2015/07/29 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
导游词之介休绵山
2019/12/31 职场文书
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android