目录
axios 简介
http request拦截器
http respones拦截器
移除拦截器
为自定义axios实例添加拦截器
axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF
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的实例挂在到最外层的vue实例上。
改进方法：
需求：某一页面不需要拦截器。其它页面还是需要的。 思路：判断路由来进行拦截，而不是移除拦截器。
还可以用vue的导航守卫router.beforeEach等来进行判断和拦截。
示例代码：
let myInterceptor= axios.interceptors.response.use(function (response) {if( !token ) {//跳转登录页}return response});//移除拦截器export function removeMyInterceptor(){axios.interceptors.response.eject(myInterceptor)}
具体代码如下所示：
import axios from'axios';//引入axios依赖import { Message } from'element-ui';import Cookies from'js-cookie';//引入cookie操作依赖import router from'@/router/index'//引入路由对象axios.defaults.timeout = 5000;axios.defaults.baseURL ='';//http request 封装请求头拦截器axios.interceptors.requet.use(config => {vartoken =''if(typeof Cookies.get('user') ==='undefined'){//此时为空}else{token = JSON.parse(Cookies.get('user')).token}//注意使用的时候需要引入cookie方法，推荐js-cookieconfig.data = JSON.stringify(config.data);config.headers = {'Content-Type':'application/json'}if(token !=''){config.headers.token = token;}returnconfig;},error => {returnPromise.reject(err);});//http response 封装后台返回拦截器axios.interceptors.response.use(response => {//当返回信息为未登录或者登录失效的时候重定向为登录页面if(response.data.code =='401'|| response.data.message =='用户未登录或登录超时，请登录！'){router.push({path:"/",querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转})}returnresponse;},error => {returnPromise.reject(error)})/*** 封装get方法* @param url* @param data* @returns {Promise}*/exportfunctionfetch(url,params={}){returnnewPromise((resolve,reject) => {axios.get(url,{params:params}).then(response => {resolve(response.data);}).catch(err => {reject(err)})})}/*** 封装post请求* @param url* @param data* @returns {Promise}*/exportfunctionpost(url,data = {}){returnnewPromise((resolve,reject) => {axios.post(url,data).then(response => {resolve(response.data);},err => {reject(err)})})}/*** 封装导出Excal文件请求* @param url* @param data* @returns {Promise}*/exportfunctionexportExcel(url,data = {}){returnnewPromise((resolve,reject) => {axios({method:'post',url: url,// 请求地址data: data,// 参数responseType:'blob'// 表明返回服务器返回的数据类型}).then(response => {resolve(response.data);let blob =newBlob([response.data], {type:"application/vnd.ms-excel"});let fileName ="合同列表_"+Date.parse(newDate())+".xls";if(window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, fileName);}else{varlink = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = fileName;link.click();window.URL.revokeObjectURL(link.href);}},err => {reject(err)})})}/*** 封装patch请求* @param url* @param data* @returns {Promise}*/exportfunctionpatch(url,data = {}){returnnewPromise((resolve,reject) => {axios.patch(url,data).then(response => {resolve(response.data);},err => {reject(err)})})}/*** 封装put请求* @param url* @param data* @returns {Promise}*/exportfunctionput(url,data = {}){returnnewPromise((resolve,reject) => {axios.put(url,data).then(response => {resolve(response.data);},err => {reject(err)})})}
