vue3+ts分装axios

3 + TypeScript封装Axios的步骤如下：
1. 首先安装Axios，可以使用npm install axios命令进行安装。
2. 在src目录下创建一个api目录，用于存放所有的API请求。
3. 在api目录下创建一个request.ts文件，用于封装Axios请求。
4. 在request.ts文件中引入Axios，并创建一个Axios实例。
5. 在Axios实例中添加拦截器，可以在请求发送前或响应返回后对请求进行处理。
6. 在request.ts文件中编写全局方法，例如get、post等方法，用于发送请求。
7. 在Vue组件中引入需要使用的API请求，并调用全局方法发送请求。

范例代码如下：

// api/request.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

const service: AxiosInstance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求发送前进行处理
    return config;
  },
  (error: any) => {
    // 处理请求错误
    Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response: AxiosResponse) => {
    // 在响应返回后进行处理
    return response.data;
  },
  (error: any) => {
    // 处理响应错误
    Promise.reject(error);
  }
);

export default service;

// api/user.ts
import request from './request';

export const getUserInfo = (id: number) => {
  return request({
    url: '/user/info',
    method: 'get',
    params: {
      id,
    },
  });
};

// components/HelloWorld.vue
<template>
  <div>{{ userInfo }}</div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { getUserInfo } from '@/api/user';

export default defineComponent({
  setup() {
    const userInfo = ref(null);

    onMounted(async () => {
      userInfo.value = await getUserInfo(1);
    });

    return {
      userInfo,
    };
  },
});
</script>