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表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
微信小程序后端实现授权登录
Feb 24 Javascript
ES6字符串的扩展实例
Dec 21 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 数组教程 定义数组
2009/10/23 PHP
php HandlerSocket的使用
2011/05/02 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
PHP守护进程实例
2015/03/06 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
python实现三种随机请求头方式
2021/01/05 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
优秀中专生推荐信
2013/11/17 职场文书
教师自荐信
2013/12/10 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js