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入门教程(10) 认识其他对象
Jan 31 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
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
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP新手入门学习方法
2011/05/08 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
jQuery常用选择器详解
2017/07/17 jQuery
详解Vue中watch的详细用法
2018/11/28 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
2014年教务工作总结
2014/12/03 职场文书
护士个人总结范文
2015/02/13 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
工作简历的自我评价
2019/05/16 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书