关于axios的拦截器是一个作用非常大,非常好用的东西。分为请求拦截器和响应拦截器两种。
我一般把拦截器写在main.js里。

1. 请求拦截器

请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。


axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么,例如加入token
.......
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

2. 响应拦截器

响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。


axios.interceptors.response.use(function (response) {
// 在接收响应做些什么,例如跳转到登录页
......
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

3. 移除拦截器


var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

4. 为axios实例添加拦截器


var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

拦截器真的非常重要非常好用~

原文地址:https://segmentfault.com/a/1190000016980755

vue axios拦截器介绍的更多相关文章

  1. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  2. vue --- axios拦截器+form格式请求体

    在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...

  3. vue axios 拦截器

    前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...

  4. vue axios拦截器的封装

    // request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...

  5. vue axios拦截器加全局loading

    import axios from 'axios' import util from './util' import {showFullScreenLoading, tryHideFullScreen ...

  6. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

  7. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

  8. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

  9. axios拦截器搭配token使用

    在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...

随机推荐

  1. 最小生成树-prim算法模板

    题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包含两个整数N.M,表示该图共有N个结点和M条无向边.(N<=5000,M<= ...

  2. 【面试 IO】【第十一篇】 java IO

    1.什么是比特(Bit),什么是字节(Byte),什么是字符(Char),它们长度是多少,各有什么区别 1>Bit最小的二进制单位 ,是计算机的操作部分 取值0或者1 2>Byte是计算机 ...

  3. 关于Label::createWithBMFont中资源文件使用的坑爹问题解决方式

    1.问题 使用Label的createWithBMFont,结果.fnt的资源总是找不到或者获取数据失败.原来.fnt资源的使用须要配合该资源的.png共同 使用,如bitmapFontTest3.f ...

  4. Solaris设备管理

    接手一台服务器,如何了解它的软硬件配置 数据库可以装在裸设备上,何为裸设备 知识点: 内核 驱动程序 设备命名 设备访问方式 磁盘的管理 内核: 指挥硬件干活的工具,shell翻译官,将人类语言翻译为 ...

  5. Failure [INSTALL_FAILED_ALREADY_EXISTS]

    1.发生原因 做unity开发的同事说apk无法安装,要我帮忙看下,然后我通过命令adb install安装apk,出现此提示 2.解决过程 首先想到的仍然是安装包已存在的问题,结果使用清理类软件清理 ...

  6. 批量杀死mysql进程

    http://www.chengyongxu.com/blog/%E6%89%B9%E9%87%8F%E6%9D%80%E6%AD%BBmysql%E8%BF%9B%E7%A8%8B/

  7. window 平台搭建简单的直播点播系统

    Windows平台如何搭建简单的直播系统前文已经有介绍,今天介绍下如何搭建简单的点播系统. 同样还是利用crtmpServer,crtmpServer可以从github中下载,可以从群里下载(群里有修 ...

  8. 前端-DDoS攻击

    下面的脚本(略有修改)就会向受害网站发送大量的请求: function imgflood() { var TARGET = 'example.com' var URI = '/index.php?' ...

  9. About me --- Connecting the dots

    在这个难以入眠的夜里,乔布斯年在斯坦福的演讲里说的“Connecting the dots”又萦绕耳际,即当我们往回看,就清楚了 自己曾经的生活和现在甚至将来是串联在一起的,这些经历决定了我们事业.生 ...

  10. Java Web Start

    1. JNLP 2. Security issue: https://java.com/en/download/help/win_controlpanel.xml Windows 7, Vista C ...