Vue 3 Typescript Axios 1.4.0 请求封装 - 示例代码与教程

在Vue 3中使用TypeScript和axios 1.4.0进行请求封装的示例代码如下：\n\n首先，安装需要的依赖：\n\nbash\nnpm install axios@1.4.0\n\n\n然后，创建一个名为api.ts的文件，用于封装请求：\n\ntypescript\nimport axios, { AxiosRequestConfig, AxiosResponse } from 'axios';\n\n// 创建一个axios实例\nconst instance = axios.create({\n baseURL: 'http://api.example.com',\n timeout: 5000, // 请求超时时间\n});\n\n// 请求拦截器\ninstance.interceptors.request.use(\n (config: AxiosRequestConfig) => {\n // 在请求发送之前做一些处理，比如添加token到请求头\n // config.headers['Authorization'] = 'Bearer ' + token;\n return config;\n },\n (error: any) => {\n // 处理请求错误\n return Promise.reject(error);\n }\n);\n\n// 响应拦截器\ninstance.interceptors.response.use(\n (response: AxiosResponse) => {\n // 在响应数据之前做一些处理\n // 比如对响应进行统一的错误处理\n return response.data;\n },\n (error: any) => {\n // 处理响应错误\n return Promise.reject(error);\n }\n);\n\n// 导出封装的请求方法\nexport const get = (url: string, params?: any) => {\n return instance.get(url, { params });\n};\n\nexport const post = (url: string, data?: any) => {\n return instance.post(url, data);\n};\n\n// 其他请求方法，比如put、delete等，可以根据需要进行封装\n\n\n接下来，在需要使用请求的地方，可以直接导入api.ts中封装的请求方法进行使用：\n\ntypescript\nimport { get, post } from './api';\n\n// 发起GET请求\nget('/users', { page: 1, pageSize: 10 })\n .then((response) => {\n // 处理响应数据\n console.log(response);\n })\n .catch((error) => {\n // 处理请求错误\n console.error(error);\n });\n\n// 发起POST请求\npost('/users', { name: 'John', age: 25 })\n .then((response) => {\n // 处理响应数据\n console.log(response);\n })\n .catch((error) => {\n // 处理请求错误\n console.error(error);\n });\n\n// 其他请求方法的使用类似\n\n\n以上示例代码封装了GET和POST请求，你可以根据需要继续封装其他类型的请求，比如PUT、DELETE等。