axios与拦截器的简单结合
封装工具类
目的: 将配置文件与axios进行一个简单的结合,优化代码,简化发送请求的代码。
创建axios.js文件,最好创建个文件夹再放axios,以便将后续的统一请求的文件夹与axios文件同级放,看起来比较清晰。
npm下载axios,在axios.js文件里引入axios包。(router与store分别存储的路由与token,在拦截器处理请求的时候需要用到)
定义一个变量用于拿到后端的接口请求地址
这里用的es6的class类的语法,constructor()是一个构造方法,用来接收实例对象传进来的参数,这里做一个初始化,this指向实例对象。(我理解的Class还是个构造函数,但是用起来结构比写普通的构造函数结构更加清晰,尤其是在写对象的时候,需要注意的是这样写的话里边的函数是不可以加function的)
第二个函数用于定义axios的相关配置,就是每个请求都需要有的属性。
第三个函数就是拦截器的相关操作了,一些判断都在这里边
最后一个是后续进行请求时需要调用的函数,下面详说。
interceptors(instance) 函数,instance是一个传入拦截器的一个axios实例,对发送的请求做处理
这里是将axios的实例请求配置传入后,第一个函数是请求发送成功时,配置headers与检测token,其实检测token在路由守卫中已经判断过,如果能进来说明是存在token的,只需要在返回请求时候检测token是否合理,第二个函数则是在请求错误的时候用Promise异步返回错误信息,
// 添加请求拦截器,若token存在则在请求头中加token,不存在也继续请求 instance.interceptors.request.use(function (config) {console.log(store.state.token);if(store.state.token){ // 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器,没有则不带tokenconsole.log('已进入配置headers');config.headers = {'Authorization' : store.state.token // Authorization是必须的}//这里的headers配置也可以写成//config.headers.token = store.state.token //或//config.headers.Authorization = store.state.token//这不是一成不变的,看自己的项目适合哪一种,有的会报错,token的位置就写存储时的位置,不同的项目可能不同}return config;}, function (error) { //请求错误console.log("在request拦截器显示错误", error.response);return Promise.reject(error);} );
添加响应拦截器,响应成功的话在这里统一判断返回的状态码(根据后端返回的状态码来写,一般都是200),如果状态码正确就返回请求的结果,错误则返回后端返回的错误信息。如果响应错误,根据后端返回的状态码返回不同的错误信息,例如我们这里403代表token失效,这里跳转到登录页,下边的配置用于登录成功后继续跳转到用户所在的路由
// 添加响应拦截器 instance.interceptors.response.use(//响应成功function (response) {console.log(response,'response');return response.data.code === 200 ? response:Promise.reject(response.data.message);//在status正确的情况下,code不正确则返回对应的错误信息}, //响应错误function (error) {console.log(error,'error');if(error.response){ //在status不正确的情况下,判别status状态码给出对应响应console.log("在response拦截器显示错误",error.response)switch (error.response.status){case 403: //token过期// store.commit("delToken")router.replace({path:'/login',query:{ redirect: router.currentRoute.fullPath }//将跳转的路由path作为参数,登录成功后跳转到该路由})}}// return Promise.reject(error);return Promise.reject(error.response.data)} );
至此拦截器部分大致完成
这里是request(options),这个函数是在进行axios请求时调用的函数,options是传进来的配置
request(options) {//在进行后续接口请求的时候就是调这个函数const instance = axios.create()//创建axios实例options = { ...this.getInsideConfig(), ...options}//把return的配置解构出来,接收传入的相关配置this.interceptors(instance)//调用拦截器,将创建的axios实例传进去return instance(options)//拿到axios实例,传入数据,返回接口请求的结果}
最后把new一个class类的实例对象,传入baseUrl,并暴露出来,这个文件结合大致就完成了
export default new HttpRequest(baseUrl)
附加上请求时的做法,方便我以后屡思路,我先创建的commonReq用于写发送请求的文件
最终就是这样的,比以前从axios开始写简洁了很多,里边应该还有很多不完善,说法不严谨甚至曲解的地方,以后再再理解了再改,也是为了自己好找好理解吧。
axios与拦截器的简单结合相关推荐
- 借助axios的拦截器实现Vue.js中登陆状态校验的思路
在做Vue中的登陆校验时,思路应该是这样的:先确定一个路由页面是否需要登陆才能访问,如果需要,就需要用户登陆,如果不需要,用户直接可以访问. 那么,首先来说,后台系统中,不一定每一个页面都要进行登陆权 ...
- vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例 实现了设置统一请求头添加token, 其中to ...
- 前端学习(2708):重读vue电商网站28之通过axios请求拦截器添加 token
通过axios请求拦截器添加 token,保证拥有获取数据的权限. 原因是,后台那边除开登录的 api,其它都需要进行授权 . 因此,我们可以利用 axios 中interceptors属性,其中有一 ...
- 前端学习(2707):重读vue电商网站27之通过axios请求拦截器添加 token
通过axios请求拦截器添加 token,保证拥有获取数据的权限. 原因是,后台那边除开登录的 api,其它都需要进行授权 . 因此,我们可以利用 axios 中interceptors属性,其中有一 ...
- axios的拦截器(Interceptors)
axios 的拦截器:interceptors 如果我们想在请求之前做点什么,用拦截器再好不过了 拦截器一般做什么? 1. 修改请求头的一些配置项 2. 给请求的过程添加一些请求的图标 3. 给请求添 ...
- axios请求拦截器错误_React中使用高阶组件和axios的拦截器,统一处理请求失败提示...
在前端开发中,判断边界条件和重要,通常我们要花费开发中的很大一部分时间做边界条件处理.发送ajax请求时,假设有这样一个需求: 每个页面发送ajax请求,如果请求失败,在页面上统一弹出样式一样的错误提 ...
- axios 请求拦截器响应拦截器
一. 拦截器介绍 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器 在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
- 浅谈axios的拦截器
什么是axios? 基于promise用于浏览器和node.js的http客户端 特点 1.支持浏览器和node.js 2.支持promise 3.能拦截请求和响应 4.能转换请求和响应数据 5.能取 ...
- Vue配置axios响应拦截器
一个项目会发送很多请求到后端,每个请求都有如下的响应 不想每个请求都去判断里面的status,那么可以使用axios的响应拦截器,对服务端返回的一些相同点做统一的处理 比如说如果有报错,就统一弹出这么 ...
最新文章
- 开源库libuuid简介及使用
- Visual C# 2008+SQL Server 2005 数据库与网络开发--13.1.3 简单记事本程序菜单设计
- Linux内核 TCP/IP、Socket参数调优
- 计算机基础与应用32页,《计算机基础与应用》2次作业及答案
- php中execute函数,PHP:调用布尔值上的成员函数execute()
- 基于Simulink与FlightGear联合建模并仿真多旋翼无人机在平衡态的动态控制
- 【单片机仿真】(二)keil 安装教程
- openssl_verify(): supplied key param cannot be coerced into a public key错误解决的一种办法
- android 文件下载
- 如何在R中画出高效美观的相关性分析图
- CUDA编程 -- 2向量加法
- Java读取串口数据
- 蓝牙 韦东山_韦东山生活实例演绎法讲解蓝牙
- 图像RGB值、灰度值、像素值的关系
- 下载deb及其依赖软件包,离线安装deb软件包
- 站在Z时代社交风口 融云打造语音聊天室新模式
- GO/KEGG富集分析泡泡图中为什么基因的数目是小数?
- 花裤衩 / vue-element-admin 的项目打包后发现不能跳转页面问题解决
- 京东商城的融资诱惑与亏损陷阱
- 关于酷柚易汛进销存开源版订货通操作说明