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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
详解Anyscript开发指南绕过typescript类型检查
Sep 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获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
python实现年会抽奖程序
2019/01/22 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
实用的简历自我评价
2014/03/06 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS