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之文件操作
Mar 07 Javascript
JScript的条件编译
May 29 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
mocha的时序规则讲解
Feb 16 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
使用React代码动态生成栅格布局的方法
May 24 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数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
domReady的实现案例
2016/11/23 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
python中装饰器级连的使用方法示例
2017/09/29 Python
python使用fork实现守护进程的方法
2017/11/16 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
python可迭代对象去重实例
2020/05/15 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
谈谈python垃圾回收机制
2020/09/27 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
仓库文员岗位职责
2014/04/06 职场文书
杭白菊导游词
2015/02/10 职场文书
支教个人总结
2015/03/04 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL