vue中axios请求拦截的示例分析

这篇文章主要介绍vue中axios请求拦截的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

下面代码给大家介绍vue axios 请求拦截，具体代码如下所示：

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.request.use(   config => {     var token = ''     if(typeof Cookies.get('user') === 'undefined'){       //此时为空     }else {       token = JSON.parse(Cookies.get('user')).token     }//注意使用的时候需要引入cookie方法，推荐js-cookie     config.data = JSON.stringify(config.data);     config.headers = {       'Content-Type':'application/json'     }     if(token != ''){      config.headers.token = token;     }     return config;   },   error => {     return Promise.reject(err);   } ); //http response 封装后台返回拦截器 axios.interceptors.response.use(   response => {     //当返回信息为未登录或者登录失效的时候重定向为登录页面     if(response.data.code == 'W_100004' || response.data.message == '用户未登录或登录超时，请登录！'){       router.push({         path:"/",         querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转       })     }     return response;   },   error => {     return Promise.reject(error)   } ) /**  * 封装get方法  * @param url  * @param data  * @returns {Promise}  */ export function fetch(url,params={}){   return new Promise((resolve,reject) => {     axios.get(url,{       params:params     })       .then(response => {         resolve(response.data);       })       .catch(err => {         reject(err)       })   }) } /**  * 封装post请求  * @param url  * @param data  * @returns {Promise}  */ export function post(url,data = {}){   return new Promise((resolve,reject) => {     axios.post(url,data)       .then(response => {         resolve(response.data);       },err => {         reject(err)       })   }) } /**  * 封装导出Excal文件请求  * @param url  * @param data  * @returns {Promise}  */ export function exportExcel(url,data = {}){   return new Promise((resolve,reject) => {     axios({       method: 'post',       url: url, // 请求地址       data: data, // 参数       responseType: 'blob' // 表明返回服务器返回的数据类型     })     .then(response => {       resolve(response.data);       let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});       let fileName = "订单列表_"+Date.parse(new Date())+".xls" ;       if (window.navigator.msSaveOrOpenBlob) {         navigator.msSaveBlob(blob, fileName);       } else {         var link = 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}  */ export function patch(url,data = {}){   return new Promise((resolve,reject) => {     axios.patch(url,data)       .then(response => {         resolve(response.data);       },err => {         reject(err)       })   }) } /**  * 封装put请求  * @param url  * @param data  * @returns {Promise}  */ export function put(url,data = {}){   return new Promise((resolve,reject) => {     axios.put(url,data)       .then(response => {         resolve(response.data);       },err => {         reject(err)       })   }) }

以上是“vue中axios请求拦截的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！