vue3和ts中如何封装axios

在Vue3和TypeScript中封装axios，可以按照以下步骤：

1. 安装axios和@types/axios：

npm install axios @types/axios --save

2. 在src目录下新建api目录，创建api.ts文件，定义全局的axios实例：

import axios, { AxiosInstance, AxiosRequestConfig } 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: any) => {
    // 对响应数据做点什么
    return response.data
  },
  (error: any) => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default service

3. 在api目录下创建一个api接口文件，定义所有的接口：

import service from './api'

export const getTodoList = () => {
  return service.get('/todo/list')
}

export const addTodo = (data: any) => {
  return service.post('/todo/add', data)
}

export const updateTodo = (data: any) => {
  return service.post('/todo/update', data)
}

export const deleteTodo = (id: number) => {
  return service.post(`/todo/delete/${id}`)
}

4. 在组件中调用api接口：

import { defineComponent } from 'vue'
import { getTodoList } from '@/api/api'

export default defineComponent({
  setup() {
    const fetchTodoList = async () => {
      try {
        const res = await getTodoList()
        // 处理数据
      } catch (error) {
        // 处理异常
      }
    }

    return {
      fetchTodoList
    }
  }
})

这样就完成了axios的封装和使用。需要注意的是，由于Vue3使用了Composition API，所以定义的组件需要使用`defineComponent`函数。另外，由于TypeScript的类型检查，需要在api接口中定义每个接口的参数类型和返回类型。