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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
JSON 数据格式详解
Sep 13 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
javascript验证form表单数据的案例详解
Mar 25 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
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和ACCESS写聊天室(八)
2006/10/09 PHP
MySQL授权问题总结
2007/05/06 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python select.select模块通信全过程解析
2017/09/20 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
Python中一些深不见底的“坑”
2019/06/12 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
软件工程专业推荐信
2013/10/28 职场文书
工程业务员岗位职责
2013/12/31 职场文书
企业员工薪酬方案
2014/06/04 职场文书
党员演讲稿
2014/09/04 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
企业催款函范本
2015/06/24 职场文书
党员转正大会主持词
2015/07/02 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS