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 目录列举函数
Nov 06 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
OpenLayers加载缩放控件使用方法详解
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
PHP中动态显示签名和ip原理
2007/03/28 PHP
php两种无限分类方法实例
2015/04/21 PHP
php实现购物车功能(下)
2016/01/05 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
python logging日志模块的详解
2017/10/29 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
python统计中文字符数量的两种方法
2019/01/31 Python
Python面向对象之Web静态服务器
2019/09/03 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
力学专业毕业生自荐信
2013/11/17 职场文书
酒吧员工的岗位职责
2013/11/26 职场文书
公司离职证明范本
2014/01/13 职场文书
四年级学生期末评语
2014/12/26 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
python小程序之飘落的银杏
2021/04/17 Python
基于python制作简易版学生信息管理系统
2021/04/20 Python
Python音乐爬虫完美绕过反爬
2021/08/30 Python