基于TypeScript封装 `axios` 请求工具详解

TypeScript 项目中，封装一个详细的 axios 请求工具可以进步代码的可维护性、可重用性，并让请求逻辑与业务逻辑分离。以下是一个详细的封装示例，包罗请求拦截器、相应拦截器、错误处置惩罚、以及类型定义。
1. 安装 Axios

首先，确保你已安装 axios 和 axios 类型定义。

1. npm install axios
2. npm install --save-dev @types/axios

复制代码

2. 封装 Axios 请求工具

在项目中创建一个新的文件 src/utils/axios.ts 来封装所有请求相关的逻辑。

1. // src/utils/axios.ts
2. import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
4. // 定义通用的返回数据结构
5. interface ApiResponse<T = any> {
6.   code: number;
7.   message: string;
8.   data: T;
9. }
11. class AxiosRequest {
12.   private axiosInstance: AxiosInstance;
14.   constructor() {
15.     this.axiosInstance = axios.create({
16.       baseURL: import.meta.env.VITE_API_BASE_URL,  // 基础URL，可以在环境变量中配置
17.       timeout: 5000, // 请求超时
18.       headers: {
19.         'Content-Type': 'application/json',
20.       },
21.     });
23.     // 请求拦截器
24.     this.axiosInstance.interceptors.request.use(
25.       (config: AxiosRequestConfig) => {
26.         // 可以在请求前做一些操作，例如加入 token
27.         const token = localStorage.getItem('token');
28.         if (token) {
29.           config.headers['Authorization'] = `Bearer ${token}`;
30.         }
31.         return config;
32.       },
33.       (error: AxiosError) => {
34.         return Promise.reject(error);
35.       }
36.     );
38.     // 响应拦截器
39.     this.axiosInstance.interceptors.response.use(
40.       (response: AxiosResponse<ApiResponse>) => {
41.         // 可以处理一些通用的响应数据
42.         const { code, message, data } = response.data;
43.         if (code === 0) {
44.           return data;  // 返回正常数据
45.         } else {
46.           // 根据不同的 `code` 进行错误处理
47.           return Promise.reject(new Error(message || '未知错误'));
48.         }
49.       },
50.       (error: AxiosError) => {
51.         // 统一错误处理
52.         let errorMessage = '请求失败';
53.         if (error.response) {
54.           errorMessage = error.response.data.message || '服务器异常';
55.         } else if (error.request) {
56.           errorMessage = '网络异常';
57.         } else {
58.           errorMessage = error.message;
59.         }
60.         return Promise.reject(new Error(errorMessage));
61.       }
62.     );
63.   }
65.   // 封装 GET 请求
66.   public get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
67.     return this.axiosInstance
68.       .get<ApiResponse<T>>(url, config)
69.       .then((response) => response);
70.   }
72.   // 封装 POST 请求
73.   public post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
74.     return this.axiosInstance
75.       .post<ApiResponse<T>>(url, data, config)
76.       .then((response) => response);
77.   }
79.   // 封装 PUT 请求
80.   public put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
81.     return this.axiosInstance
82.       .put<ApiResponse<T>>(url, data, config)
83.       .then((response) => response);
84.   }
86.   // 封装 DELETE 请求
87.   public delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
88.     return this.axiosInstance
89.       .delete<ApiResponse<T>>(url, config)
90.       .then((response) => response);
91.   }
92. }
94. // 创建一个 AxiosRequest 实例
95. const axiosRequest = new AxiosRequest();
96. export default axiosRequest;

复制代码

3. 请求利用示例

在 Vue 组件中，可以直接导入并利用封装好的请求工具。

1. // src/views/Example.vue
2. <template>
3.   <div>
4.     <button @click="fetchData">获取数据</button>
5.     <div v-if="error" class="error">{{ error }}</div>
6.     <div v-if="data">
7.       <pre>{{ data }}</pre>
8.     </div>
9.   </div>
10. </template>
12. <script lang="ts">
13. import { defineComponent, ref } from 'vue';
14. import axiosRequest from '@/utils/axios';
16. export default defineComponent({
17.   name: 'Example',
18.   setup() {
19.     const data = ref<any>(null);
20.     const error = ref<string>('');
22.     const fetchData = async () => {
23.       try {
24.         const response = await axiosRequest.get('/api/endpoint');  // 调用 GET 请求
25.         data.value = response;
26.       } catch (err) {
27.         error.value = (err as Error).message;
28.       }
29.     };
31.     return {
32.       data,
33.       error,
34.       fetchData,
35.     };
36.   },
37. });
38. </script>
40. <style scoped>
41. .error {
42.   color: red;
43. }
44. </style>

复制代码

4. 设置环境变量

确保在 .env 文件中设置基础的 API URL：

1. VITE_API_BASE_URL=https://your-api-url.com

复制代码

5. 代码解释

• 请求拦截器：在请求发送之前，可以为请求添加授权信息（如 token）。也可以处置惩罚其他全局请求设置。
  
• 相应拦截器：所有的相应数据都会经过拦截器处置惩罚，统一检查返回的 code，如果为 0 表示乐成，否则会抛出错误。
  
• 错误处置惩罚：无论是请求错误还是相应错误，都会被统一捕捉并返回可读的错误信息。
  
• 请求方法封装：提供了 GET、POST、PUT 和 DELETE 方法封装，可以在不同的接口请求中利用。
  

通过这种方式，你的 Axios 请求将更加模块化、易于维护，并且在遇到题目时可以或许快速定位和处置惩罚错误。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。