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 相关文章推荐
json原理分析及实例介绍
Nov 29 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
js实现产品缩略图效果
Mar 10 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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断点续传之如何分割合并文件
2014/03/22 PHP
php删除指定目录的方法
2015/04/03 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP session 会话处理函数
2016/06/06 PHP
php Session无效分析资料整理
2016/11/29 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
2013/07/08 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python修改MP3文件的方法
2015/06/15 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python 性能优化技巧总结
2016/11/01 Python
python实现音乐下载的统计
2018/06/20 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
应届生会计求职信
2013/11/11 职场文书
财务简历的自我评价
2014/03/05 职场文书
党支部承诺书范文
2014/03/28 职场文书
公司门卫岗位职责
2015/04/13 职场文书
可可西里观后感
2015/06/08 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers