vue简单的Axios封装
1.引入文件
import axios from "axios";
import router from "@/router/router";
import qs from "qs";
2.axios 全局默认设置
axios.defaults.baseURL = "http://xxx.com"
axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded";
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
3.axios 实例对象
let http = axios.create({
timeout:10000;
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
transformRequest: [
function (data, headers) {
if (headers["Content-Type"] === "application/x-www-form-urlencoded") {
return qs.stringify(data);
} else if (
headers["Content-Type"] === "multipart/form-data;charset=UTF-8"
) {
return data;
}
}
]
})
4.http request 拦截器
http.interceptors.request.use(
config => {
if (localStorage.token) {
config.headers.token = JSON.parse(localStorage.token);
} else {
router.replace("/");
}
return config;
},
error => Promise.error(error)
);
5.新建文件 封装请求
import http from "@/http";
function put(url, data) {
return http.put(url, {
json: JSON.stringify(data),
});
}
function get(url, data) {
if (IsURL(url)) {
http.url = url;
}
return http.get(url, {
params: data,
});
}
function post(url, data) {
return http.post(url, {
json: JSON.stringify(data),
});
}
function del(url, data, header) {
return http.delete(url, {
headers: header,
params: data,
});
}
function IsURL(str_url) {
var strRegex = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
var re = new RegExp(strRegex);
if (re.test(str_url)) {
return true;
} else {
return false;
}
}
export {
put,
get,
post,
del
};