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 相关文章推荐
jquery 中的each()跳出循环的语句
May 23 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
小程序实现留言板
Nov 02 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
解决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
php print EOF实现方法
2009/05/21 PHP
简单谈谈favicon
2015/06/10 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python插入数据到列表的方法
2015/04/30 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
linux安装python修改默认python版本方法
2019/03/31 Python
在Python中COM口的调用方法
2019/07/03 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
初中生自我评价
2014/02/01 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
接收函格式
2015/01/30 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js