axios封装
1 文件结构
封装后的axios文件放在public静态资源中,
2 接口地址设置
在public文件夹中创建config.js文件,
var config = {
'base_url': 'http://localhost:9528/'
}
在入口html文件中引入
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="./js/config.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
在main.js文件中引入axios.js文件,并全局挂载,之后在组件中就可以使用this.$axios进行数据请求
import Axios from "../public/js/ajax/axios"
Vue.prototype.$axios = Axios
3 源码
项目中在进行数据请求时一般需要携带token,而我们一般将token存储在浏览器的sessionstorage中,对其进行了封装,更加方便的对本地数据进行存储
/**
* 处理本地缓存
*/
/**
* 验证是否支持 sessionStorage
*/
function verifyLocal() {
return window.sessionStorage && (window.sessionStorage.setItem('test', 'test'), window.sessionStorage.getItem('test') == 'test') ? true : false
}
/**
* 获取cookie
*/
function getCookie(name) {
let arr = document.cookie.split("; ") || [];
let obj = {};
arr.forEach(value => {
let stepArr = value.split('=');
obj[stepArr[0]] = stepArr[1]
});
/**
* 传入要获取的cookie键时,返回对应的键值,不传时返回由cookie键值对组成的对象
*/
if (name) {
return obj[name]
} else {
return obj
};
}
let localHandle = {
// 设置本地存储
set(key, value) {
if (verifyLocal()) {
window.sessionStorage.setItem(key, value);
} else {
let days = 1 / 24; //过期时间(天)
let d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toGMTString();
document.cookie = key + "=" + value + ";" + expires;
}
},
// 获取本地存储
get(key) {
if (verifyLocal()) {
return window.sessionStorage.getItem(key) ? window.sessionStorage.getItem(key) : null
} else {
return getCookie(key);
}
},
clear(key) { //不传参数时清除所有本地数据
if (verifyLocal()) {
if (key) {
window.sessionStorage.removeItem(key);
} else {
window.sessionStorage.clear();
}
} else {
if (key) {
document.cookie = key + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
} else {
Object.keys(getCookie()).forEach(value => {
document.cookie = value + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
})
}
}
}
}
export default {
localHandle
}
axios封装源码
var routerLogin = '/login' //--登录页面路由 在登录状态过期是跳转到登录页面
var token = 'token' //--本地存储中token键名,可修改
var overdue = -1 //--result.data.success 登录状态过期时的状态码 --与后端商定
/**
* axios 封装
*/
import qs from 'qs' // 引入qs模块, 用来序列化post类型的数据(可用可不用, 配合后台的数据 转换 格式)
import axios from axios
import {
Message,
Notification,
MessageBox
} from 'element-ui' //引入element-ui 彈窗提示(vue3.x中有所变化)
import {
localHandle
} from "./cook" //本地存储相关配置
import Router from 'vue-router';
let baseUrl = config.base_url;
// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
// 设置请求超时时间
axios.defaults.timeout = 10000;
// 设置公共请求地址
axios.defaults.baseURL = baseUrl;
// 拦截请求
axios.interceptors.request.use(config => {
// 设置请求头
config.headers['Authorization'] = "Bearer " + localHandle.get(token);
return config
}, error => {
Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.success || 200;
// 获取错误信息
const msg = res.data.msg; //提示信息字段可修改,根据后端数据而定
if (code == overdue) { //
MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
/**
* 登录状态过期时,跳转到登录页面,路由根据实际情况而定
*/
Router.push(routerLogin)
}).catch(() => { });
}
else if (code == 200 || code == 304 || code == 1) { //请求成功时的状态码 与后端商定
return res
} else { //请求失败
Message({
message: msg,
type: 'error'
});
return Promise.reject(new Error(msg))
}
}, error => {
let {
message
} = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
});
// 封装请求方法
function requestMethod(type, url, data) {
return new Promise((reslove, reject) => {
axios({
method: type,
url: url,
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
data: JSON.stringify(data)
}).then(res => {
reslove(res.data)
}).catch(error => {
reject(error.message)
})
})
}
axios.get = (url, data) => {
return new Promise((resolve, reject) => {
axios({
url: url,
method: 'get',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
params: data
}).then(response => {
resolve(response.data)
}).catch((error) => {
reject(error)
})
})
};
axios.post = (url, data) => {
return requestMethod('post', url, data)
};
axios.put = (url, data) => {
return requestMethod('put', url, data)
};
axios.patch = (url, data) => {
return requestMethod('patch', url, data)
};
axios.delete = (url, data) => {
return requestMethod('delete', url, data)
};
export default axios;