Vue添加请求拦截器及vue-resource 拦截器使用


Posted in Javascript onNovember 23, 2017

一、现象

统一处理错误及配置请求信息

二、解决

1、安装 axios  , 命令: npm install axios --save-dev

2、在根目录的config目录下新建文件 axios.js  ,内容如下:

import axios from 'axios'
// 配置默认的host,假如你的API host是:http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club' 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么

return config
}, function (error) {

// 对请求错误做些什么
return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {

// 对响应数据做点什么

return response
}, function (error) {

// 对响应错误做点什么

return Promise.reject(error)
});

3、在main.js中进行引用,并配置一个别名($ajax)来进行调用:

import axios from 'axios'
import '../config/axios'
Vue.prototype.$ajax = axios

如图:

4、应用,一个登录的post如:

this.$ajax({
method: 'post',

url: '/login',

data: {


'userName': 'xxx',


'password': 'xxx'

}
}).then(res => {

console.log(res)
})

ps:下面看下vue-resource 拦截器使用

在vue项目使用vue-resource的过程中,临时增加了一个需求,需要在任何一个页面任何一次http请求,增加对token过期的判断,如果token已过期,需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断,那么会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的!

vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后,如果设置了拦截器如下,会优先执行拦截器函数,获取响应体,然后才会决定是否把response返回给

then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断,来决定是跳转到登录页面还是留在当前页面继续获取数据。

下边代码添加在main.js中

Vue.http.interceptors.push((request, next) => {
 console.log(this)//此处this为请求所在页面的Vue实例
 // modify request
 request.method = 'POST';//在请求之前可以进行一些预处理和配置
 // continue to next interceptor
next((response) => {//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断,就添加在此处,页面中任何一次http请求都会先调用此处方法
 
response.body = '...';


return response;
 });
});

在知道此方法之前,鄙人想了一个笨方法,但是也能在一定程度上降低修改工作量。方法是为Vue绑定一个this.$$http.get方法取代this.$http.get方法,每个页面的http请求添加个$在$http前即可。

// ajax.js
function plugin(Vue){
 Object.defineProperties(Vue.prototype,{
  $$http:{
   get(){
    return option(Vue);
   }
  }
 })
}
function option(Vue){
 let v = new Vue();
 return {
  get(a,b){
   let promise = new Promise(function(reslove,reject){
    v.$http.get(a,b).then((res)=>{
     reslove(res)
    },(err)=>{





//处理token过期问题。
    })
   })
   return promise;
  }
 }
}
module.exports=plugin;
//main.js
import ajax from './ajax.js'
Vue.use(ajax)

总结

以上所述是小编给大家介绍的Vue添加请求拦截器及vue-resource 拦截器使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 #Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 #Javascript
bootstrap实现二级下拉菜单效果
Nov 23 #Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 #Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 #Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 #Javascript
基于Bootstrap实现城市三级联动
Nov 23 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
js给selected添加options的方法
2015/05/06 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
基于python代码批量处理图片resize
2020/06/04 Python
Python如何实现远程方法调用
2020/08/07 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
高中生校园生活自我评价
2013/09/19 职场文书
毕业自荐信
2013/12/16 职场文书
大学军训通讯稿
2014/01/13 职场文书
学校宣传标语
2014/06/18 职场文书
人事任命通知
2015/04/20 职场文书
管理失职检讨书
2015/05/05 职场文书
高中运动会前导词
2015/07/20 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫