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

最新推荐文章于 2024-07-14 11:27:20 发布

程序猿_“大神”

最新推荐文章于 2024-07-14 11:27:20 发布

阅读量1.6k

点赞数 1

文章标签： typescript

本文链接：https://blog.csdn.net/dyx001007/article/details/127747434

版权

本文介绍了如何在Vue3项目中，结合Vite和TypeScript，进行axios的二次封装，创建API请求。内容适用于初学者，提供了一种简单有效的API请求解决方案，覆盖了大部分常见需求。

摘要由CSDN通过智能技术生成

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) =