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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 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四舍五入精确小数位及取整
2014/01/14 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php实现插入排序
2015/03/29 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
JS的document.all函数使用示例
2013/12/30 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
Python语法快速入门指南
2015/10/12 Python
python绘制直线的方法
2018/06/30 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
2015年安全工作总结范文
2015/04/02 职场文书
银行稽核岗位职责
2015/04/13 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle