vue 3 + ts 项目怎样封装axios 并封装get post 其你去

在 Vue 3 + TypeScript 项目中，可以通过以下步骤来封装 axios 并封装 get 和 post 请求：

安装 axios 和 @types/axios：
npm install axios @types/axios
登录后复制

创建 axios 实例
在 src 目录下创建一个 api 目录，并在其中创建一个 axios.ts 文件。在该文件中创建 axios 实例：
import axios, { AxiosInstance } from 'axios'

const instance: AxiosInstance = axios.create({
baseURL: 'http://your.api.url', // 根据实际情况修改接口地址
timeout: 10000, // 请求超时时间
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
})

export default instance
登录后复制

封装 get 和 post 请求
在 api 目录下创建一个 request.ts 文件，并在其中封装 get 和 post 请求：
import axios from './axios'

interface ResponseData<T> {
code: number;
message: string;
data: T;
}

export function get<T>(url: string, params?: any): Promise<T> {
return new Promise((resolve, reject) => {
axios.get<ResponseData<T>>(url, {
params
}).then(response => {
const res = response.data
if (res.code === 0) {
resolve(res.data)
} else {
reject(res.message)
}
}).catch(error => {
reject(error)
})
})
}

export function post<T>(url: string, data?: any): Promise<T> {
return new Promise((resolve, reject) => {
axios.post<ResponseData<T>>(url, data).then(response => {
const res = response.data
if (res.code === 0) {
resolve(res.data)
} else {
reject(res.message)
}
}).catch(error => {
reject(error)
})
})
}
登录后复制
在以上代码中，封装了一个 ResponseData 接口，该接口规定了接口返回数据的格式，包括 code、message 和 data 三个字段。封装的 get 和 post 方法返回一个 Promise 对象，resolve 时返回 data 字段的值，reject 时返回 message 字段的值。

在组件中使用封装好的请求方法
在组件中引入封装好的请求方法，并使用：
import { defineComponent, ref } from 'vue'
import { get, post } from '@/api/request'

export default defineComponent({
setup() {
const data = ref<any>(null)

// 发起 get 请求
get<any>('/api/getData').then(res => {
data.value = res
}).catch(err => {
console.log(err)
})

// 发起 post 请求
post<any>('/api/postData', { name: '张三', age: 18 }).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})

return {
data
}
}
})
登录后复制
在以上代码中，使用 ref 创建了一个 data 变量，用于存储 get 请求返回的数据。在 setup 函数中调用 get 和 post 方法，并在 then 和 catch 中处理请求成功和失败的逻辑。最后将 data 变量作为组件的返回值。

这样就完成了 axios 的封装和 get、post 请求的封装。在组件中使用封装好的请求方法，可以让代码更加简洁易懂，并且方便统一处理请求成功和失败的逻辑。