vue3统一封装axios

1.在src下新建文件夹apis 在apis下新建一个index.ts
2.在index.ts添加
import axios from 'axios';
export const httpInstance = axios.create();
3.在终端输入 npm run lint 确定文件没有问题
4.定义并导出一个后端的数据类型
export type BkResponse = {
data: any;
code: number;
message: string;
succeed: true;
};
5.设置请求根路径（VITE_BASEURL是.env.dev下的)

6.响应拦截器
意义：响应拦截器发送请求后接收到服务器响应之前的一个拦截器，它可以对服务器返回的数据进行统一的处理（如：对返回的数据进行格式化、错误处理、权限验证等）
如果在这里不进行统一的处理之后我们每发一次请求都要处理一次，非常麻烦，这是一直优化代码的表现
//配置相应拦截器

export const $http = async (config: AxiosRequestConfig) => {
    //封装带loading的请求
    const loadingInstance = ElLoading.service();
    try {
        const axiosResponse = await httpInstance<BkResponse>(config);
        const bkResponse = axiosResponse.data
        if (!bkResponse?.succeed) {
            let errTitle: string = 'Error';
            if (bkResponse.code === 401) {
                errTitle = 'Unauthorized'
                ElMessage.error('未授权')

            } else if (bkResponse.code === 403) {
                errTitle = 'Forbidden'
            }
            else if (bkResponse.code === 9999) {
                errTitle = '9999Error'
            } else if (bkResponse.code === 500) {
                errTitle = 'ServerError'
            } else {
                errTitle = 'Unknown'
            }
            const err = new Error(bkResponse?.message || 'Unknown');
            err.name = errTitle
            throw err;
        }
        return bkResponse
    } catch (err) {
        if (err instanceof AxiosError) {
            ElMessage.error('网络错误')
        }
        throw err;
    }
    finally{
        loadingInstance.close();
    }
}