vue3+vite+ts 封装axios_vue3+ ts + vite axios封装

1、在src下新建http 文件夹 ，再新建index.ts

    import axios from 'axios'
    
	// 接口统一域名
	const devProxy: boolean = true
	var baseURL: string | undefined
	switch (import.meta.env.MODE) {
	    case 'development':
	        baseURL = devProxy ? '/dev' : import.meta.env.VITE_DEV_URL
	        break;
	    default:
	        baseURL = import.meta.env.VITE_PROD_URL
	        break;
	}
	
    //创建axios的一个实例 
    var instance = axios.create({
		baseURL,
        timeout: 6000, //设置超时
        headers: {
        	'X-Custom-Header': 'foobar'
        }
    })
	instance.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
	
    //请求拦截器 
    instance.interceptors.request.use((config: any) => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = window.localStorage.getItem('token');
        token && (config.headers.Authorization = token)
        //若请求方式为post，则将data参数转为JSON字符串
        if (config.method === 'POST') {
            config.data = JSON.stringify(config.data);
        }
        return config;
    }, (error) =>
        // 对请求错误做些什么
        Promise.reject(error));

    //响应拦截器
    instance.interceptors.response.use((response) => {
        //响应成功
        console.log('响应成功');
        return response.data;
    }, (error) => {
        console.log(error)
        //响应错误
        if (error.response && error.response.status) {
            const status = error.response.status
            console.log(status);
            return Promise.reject(error);
        }
        return Promise.reject(error);
    });
    export default instance;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

2、再http下新建axiox.ts

    import instance from "./index"
    /**
     * @param {String} method  请求的方法：get、post、delete、put
     * @param {String} url     请求的url:
     * @param {Object} data    请求的参数
     * @param {Object} config  请求的配置
     * @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值
     */
    const axios = async ({
        method,
        url,
        data,
        config
    }: any): Promise<any> => {
        method = method.toLowerCase();
        if (method == 'post') {
            return instance.post(url, data, { ...config })
        } else if (method == 'get') {
            return instance.get(url, {
                params: data,
                ...config
            })
        } else if (method == 'delete') {
            return instance.delete(url, {
                params: data,
                ...config
            })
        } else if (method == 'put') {
            return instance.put(url, data, { ...config })
        } else {
            console.error('未知的method' + method)
            return false
        }
    }
    export {
        axios
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

3、在src 下新建api 文件夹 ，在新建index.ts

import { axios } from "../http/axios"
//敏感词校验
export const getUser = (params: any) => {
    return axios({
        url: "/getUser",
        params,
        method: "get",
    }).then((res:any=>{
	//正确处理
	}))
} 

export const getUser = (params: any) => {
    return axios({
        url: "/getUser",
        params,
        method: "get",
    }).then((res: any) => {
    	//正确数据处理
        console.log(res)
    }).catch((error: any) => {
        if (!error.isCancel) {
	    	//错误数据处理
	        console.log(error.message))
        }
    })
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4、去页面调用

  <script setup lang="ts">
  import { getUser } from "../api/index";
  const s = await getUser({
    text: "zhangsan",
  });
  console.log(s);
  </script>
1
2
3
4
5
6
7