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开发时的五个注意事项
Dec 08 Javascript
jQuery each()小议
Mar 18 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
2016/11/28 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
python中的迭代和可迭代对象代码示例
2017/12/27 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
小学一年级学生评语
2014/04/22 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
最新最全的手机号验证正则表达式
2022/02/24 Javascript
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL