axios封装

接口请求是前端的必修课，身处前端就离不开异步接口请求，接口请求就是封装的必修之路

而对请求不做任何封装，也不是说不好，但我们大多数的需要的接口不只是一个俩个，这就需要写很多重复的代码。这样会难以维护项目，所以有了axios的封装。

axios是基于permise的

首先我们需要搞清楚请求流程

        调用请求参数>请求参数处理>请求拦截（修改请求头，配置用户标识）>发起请求>响应拦截(网络处理错误，授权处理错误，其他处理错误，请求完成）>返回参数

其中俩个重要的处理模块，请求流程和拦截器

请求流程可以分为三块：1请求加入拦截前。2发起请求。3请求从响应拦截器出来后

可以归为俩类，针对单独接口以及针对所有接口

        针对单独：请求前的参数处理，请求后的返回值处理

        针对所有：post，get，put，del

拦截器有

        请求拦截器：请求调整，用户标识i

        响应拦截器： 网络错误，授权错误，普通错误，代码异常

基础设置：

const baseUrl = "url";
const instance = axios.create({
    baseURL: baseUrl,
    timeout: 60 * 1000,
    headers: {
        "Content-Type": "application/json;charset=UTF-8",
    },
});

请求拦截中，对请求的调整，对用户标识的配置

instance.interceptors.request.use(
    (config) => {
        showLoading();
        config.headers = config.headers || {};
        
        
        if(localStorage.getItem('token')){
            config.headers.token = localStorage.getItem('token') || ""
        }
        if(config.method === "POST") {
            config.data = JSON.stringify(config.data);
        }

响应拦截器有网络错误，授权错误，其他错误，因此需要三类错误函数写好，以便增强代码扩展性和后期维护。

instance.interceptors.response.use(
    (response) => {
        hideLoading();
        if(response.data.code === 402){
            ElMessage.error(response.data.msg);
            router.push('/');
        }
        else return response.data;
    },

 

当所有错误类型处理函数写完在axios的拦截器中进行调用就行