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 操作符实例代码
Oct 24 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php+mysql数据库查询实例
2015/01/21 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
python中去空格函数的用法
2014/08/21 Python
Python3匿名函数用法示例
2018/07/25 Python
Python unittest单元测试框架总结
2018/09/08 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
Python生成器常见问题及解决方案
2020/03/21 Python
flask框架中的cookie和session使用
2021/01/31 Python
C#公司笔试题
2014/03/28 面试题
先进个人事迹材料
2014/01/25 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers