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 相关文章推荐
javascipt基础内容--需要注意的细节
Apr 10 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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设计模式之命令模式使用示例
2014/03/02 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
php图片上传类 附调用方法
2016/05/15 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
简单谈谈json跨域
2016/03/13 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
JSONP基础知识详解
2017/03/19 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python实现求最长回文子串长度
2018/01/22 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
python实现按日期归档文件
2021/01/30 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
护理自荐信范文
2013/10/05 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
微电影大赛策划方案
2014/06/05 职场文书
村道德模范事迹材料
2014/08/28 职场文书
元宵节寄语大全
2015/02/27 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS