Axios secondary packaging and api request of vue3+vite+TS

The encapsulation of vue3 ts and vue2 js is actually the same. This kind of writing method is just right for me who just learned ts. It can solve most of the problems. If it is more complicated, this kind of writing method should solve 70% of the problems. The problem may involve generics, which I haven't mastered yet.

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 request

import request from "./https"

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