Angular6笔记之封装http的示例代码


Posted in Javascript onJuly 27, 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]
})

至此,Angular6的http模块封装已经基本完成,如果有需要可以自行扩展,可参考第二步。如果看完以后不明白或者我有写的不对的地方,欢迎大家进行评论。

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

Javascript 相关文章推荐
JavaScript函数、方法、对象代码
Oct 29 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
Vue 中axios配置实例详解
Jul 27 #Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 #Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 #Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 #Javascript
JavaScript事件对象event用法分析
Jul 27 #Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 #Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 #Javascript
You might like
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
房屋委托书范本
2014/04/04 职场文书
销售求职信范文
2014/05/26 职场文书
中学生打架检讨书
2014/10/13 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
2016春季运动会开幕词
2016/03/04 职场文书