这次给大家带来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)
})
})
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
angular服务端渲染方法详解
element-ui控件操作iview的方法
以上就是vue axios实现请求拦截步骤详解的详细内容。