vue3+vite+TS的axios二次封装和api请求

vue3 ts 跟 vue2 js 封装其实相差不打的，这种写法对于我这种刚学ts的来说刚刚好，可以解决大部分问题，如果说比较复杂的这种写法应该可以解决百分之七十的问题，可能会涉及到泛型，目前我也没掌握。

import axios from "axios" //第一步：导入axios

//定义类型
let loading: any;
//开启loading 
function startLoading() {
    //@ts-ignore
    loading = ElLoading.service({
        lock: true,
        text: '拼命加载中....',
        background: "rgba(0,0,0,0.7)",
    })
}
//关闭loading 
function endLoading() {
    loading.close();
}

//第二步：创建axios实例
const service = axios.create({
    // baseURL:env.prod.baseUrl,
    timeout: 50000//超时时间
})

//第三步 请求拦截
service.interceptors.request.use((config) => {
    // 在发送请求之前做些什么 验证token之类的
    // console.log("请求的数据:", config);
    if (sessionStorage.token) {
        config.headers.Authorization = sessionStorage.token
    }
    //开启loading
    startLoading();
    return config;
}, (error) => {
    //关闭loading
    endLoading();
    return Promise.reject(error)
}
)

//第四步 响应拦截
service.interceptors.response.use((response) => {
    //关闭loading
    endLoading();
    return response
},
    (error) => {
        const { status } = error.response;
        if (status == 401) {
            //@ts-ignore
            ElMessage.error("token过期啦，请重新登陆");
            sessionStorage.removeItem('token')
            //router.push("/login")
        }
        //关闭loading
        endLoading();
        //@ts-ignore
        ElMessage.error(error.response.data.msg);
        return Promise.reject(error);
    }
)
export default service;

api 请求

import request from "./https"

export function register(data: any) {
    return request({
        url: '拼接的地址',
        method:'',
        data
    })
}