axios的二次封装

简单封装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;

你可能感兴趣的:(前端,前端,TypeScript,Axios)