vue axios登录请求拦截器


Posted in Javascript onApril 02, 2018

当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截。

1.安装配置axios

cnpm install --save axios 

我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下

import axios from 'axios' 
import { Indicator } from 'mint-ui'; 
import { Toast } from 'mint-ui'; 
// http request 拦截器 
axios.interceptors.request.use( 
  config => { 
    Indicator.open() 
    return config; 
  }, 
  err => { 
    Indicator.close() 
    return Promise.reject(err); 
  }); 
// http response 拦截器 
axios.interceptors.response.use( 
  response => { 
    Indicator.close() 
    return response; 
  }, 
  error => { 
    Indicator.close() 
  }); 
export default axios

然后在main.js中引入这个js文件

import axios from './axio'; 
Vue.prototype.$axios = axios;

这样就可以使用axios去请求了,在组件中可以用this.axios去调用

this.$axios({ 
    url:requestUrl+'homePage/v1/indexNewPropertiesResult', 
    method:'POST', 
   }).then(function(response){ //接口返回数据 
    console.log(response) 
    that.modulesArr=response.data.data.modules; 
//   that.getRecommendGoods(0); 
   });

只有用axios请求接口,才能去拦截,现在已经能在axios.js中拦截到了,可以在两个状态中做你需要的操作

补充:

axios使用拦截器统一处理所有的http请求

axios使用拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

•http request拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
 }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
 });

•http respones拦截器

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

•移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

•为自定义axios实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

总结

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

Javascript 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
webpack+react+antd脚手架优化的方法
Apr 02 #Javascript
vue axios请求超时的正确处理方法
Apr 02 #Javascript
JavaScript 日期时间选择器一些小结
Apr 02 #Javascript
vue计算属性及使用详解
Apr 02 #Javascript
vue小白入门教程
Apr 02 #Javascript
Angular父组件调用子组件的方法
Apr 02 #Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 #Javascript
You might like
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
vue二级路由设置方法
2018/02/09 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
团日活动策划书
2014/02/01 职场文书
个人评语大全
2014/05/04 职场文书
司机个人年终总结
2015/03/03 职场文书
房屋维修申请报告
2015/05/18 职场文书
关于童年的读书笔记
2015/06/26 职场文书
导游词之贵州织金洞
2019/10/12 职场文书