简单封装axios的二次封装,:
(1)、设置了axios的请求超时时间以及超时提示。
(2)、配置了请求拦截器:
a、设置请求自动携带token。
b、自动拼接请求URL。
c、根据不同的请求设置Content-Type。
(3)、配置响应拦截器:
a、细化响应状态,并给出响应的提示。
(4)、外部调用:
import remoteServe from '@/utils/axiosUtils';
const invoceRemoteServe = async (_url: string, _params: any) => {
return await remoteServe.post<Data>(_url, _params)
};
const getHomeBookList: any = async () => {
return invoceRemoteServe('/test/api/getHomeBookList', {}, "");
}
import axios from 'axios'
import { ElMessage } from 'element-plus'
import HttpCode from '../constant/HttpCodeConstant'
import router from "../router/index";
// 设置axios在请求的时候携带所有的cookies
axios.defaults.withCredentials = true;
const baseConfigURL = "http://127.0.0.1:8000";
// 创建axios实例对象
const remoteServe = axios.create({
baseURL: baseConfigURL,
timeout: 1000, // 超时时间
timeoutErrorMessage: "请求超时,请联系管理员检查服务情况!"
});
// 设置axios请求头
remoteServe.defaults.headers.post['Content-Type'] = "application/json; charset=UTF-8";
// 响应拦截器
remoteServe.interceptors.response.use(success => {
// 请求成功
if (success.status == HttpCode.HTTP_CODE_200) {
ElMessage.success("请求成功!");
return success.data;
} else if (success.status == HttpCode.HTTP_CODE_401) { // 未认证
ElMessage.warning("请求失败,请重新登录后再试!");
router.replace("/");
return;
} else {
ElMessage.warning("请求失败,请检查!");
return;
}
}, error => {
ElMessage.error("请求失败,服务器维护中,请稍后再试!");
return Promise.reject(error)
});
// 请求拦截器
remoteServe.interceptors.request.use(config => {
config.url = baseConfigURL + config.url;
const token = localStorage.getItem("token");
token && (config.headers.Authorization = token);
return config;
});
export default remoteServe;