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 相关文章推荐
jquery放大镜效果超漂亮噢
Nov 15 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
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变量引用的面试题
2010/08/08 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
Jquery cookie操作代码
2010/03/14 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
使用C++扩展Python的功能详解
2018/01/12 Python
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
教师辞职报告范文
2014/01/20 职场文书
装修五一活动策划案
2014/01/23 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle
GO中sync包自由控制并发示例详解
2022/08/05 Golang