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 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
webpack打包优化的几个方法总结
Feb 10 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
PHP学习之字符串比较和查找
2011/04/17 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
社区党员先进事迹
2014/01/22 职场文书
八一建军节活动方案
2014/02/10 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
基督教婚礼主持词
2014/03/14 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
实习介绍信模板
2015/01/30 职场文书
三八妇女节寄语
2015/02/27 职场文书