使用ts封装一个Axios请求

下面是一个简单的 TypeScript 版本的封装 Axios 请求的例子，基于 Axios 0.21.1 版本：

import axios,{ AxiosRequestConfig, AxiosResponse }from'axios';// 定义通用响应结构exportinterfaceApiResponse<T>{code: number;data:T;message: string;}// 创建一个 Axios 实例const axiosInstance = axios.create({baseURL:'https://api.example.com',});// 定义请求拦截器
axiosInstance.interceptors.request.use((config: AxiosRequestConfig)=>{// 在发送请求之前做些什么，比如添加 token 头部等return config;},(error: any)=>{// 对请求错误做些什么return Promise.reject(error);});// 定义响应拦截器
axiosInstance.interceptors.response.use((response: AxiosResponse)=>{// 对响应数据做些什么，比如处理通用响应结构，返回 data 部分constapiResponse: ApiResponse<any>= response.data;return apiResponse.data;},(error: any)=>{// 对响应错误做些什么return Promise.reject(error);});// 封装 GET 请求exportfunction get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T>{return axiosInstance.get<T>(url,{ params,...config });}// 封装 POST 请求exportfunction post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>{return axiosInstance.post<T>(url, data, config);}// 封装 PUT 请求exportfunction put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>{return axiosInstance.put<T>(url, data, config);}// 封装 DELETE 请求exportfunction del<T>(url: string, config?: AxiosRequestConfig): Promise<T>{return axiosInstance.delete<T>(url, config);}

在这个示例中，我们首先定义了一个通用的响应结构 ApiResponse，用来包装 API 返回的数据，包括状态码、数据和消息等信息。然后，我们创建了一个 Axios 实例，定义了请求和响应拦截器，以及封装了 GET、POST、PUT 和 DELETE 请求的函数。每个函数都使用了 Axios 实例发送请求，并处理了响应的通用结构，最后只返回了数据部分。

使用这些封装的函数，可以方便地发送请求，并处理通用响应结构。比如，我们可以这样使用

import{ get, post }from'./api';// 发送 GET 请求
get<User[]>('/users').then(users=>{
  console.log(users);});// 发送 POST 请求
post<User>('/users',{name:'Alice',age:18}).then(user=>{
  console.log(user);});

其中，我们可以在函数中指定返回的数据类型，例如 <User[]> 表示返回一个 User 类型的数组，或者 表示返回一个 User 类型的对象。

如何在封装的 Axios 请求中添加一些常用的功能

添加请求超时功能

在网络请求中，经常会遇到请求超时的情况，为了提高用户体验，我们可以添加请求超时的功能，当请求超过一定时间仍未返回时，自动取消请求并抛出异常。这可以通过设置 timeout 参数来实现，例如：

// 封装 GET 请求，并设置超时时间为 10 秒exportfunction get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T>{return axiosInstance.get<T>(url,{ params,...config,timeout:10000});}

在这个示例中，我们为 GET 请求添加了一个超时时间为 10 秒的选项。当请求超过 10 秒仍未返回时，Axios 会自动取消请求，并抛出一个 Error 异常。我们可以在调用时捕获这个异常，以便进行错误处理。

添加请求重试功能

有时候，在网络不稳定的情况下，请求可能会失败，为了提高请求的成功率，我们可以添加请求重试的功能，即在请求失败时，自动重试一定次数，直到请求成功或达到最大重试次数为止。这可以通过设置 retry 和 retryDelay 参数来实现，例如：

// 封装 GET 请求，并添加请求重试功能exportfunction get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T>{const defaultConfig ={ params,...config };return axiosInstance.get<T>(url,{...defaultConfig,retry:3,// 最多重试 3 次retryDelay:1000,// 每次重试间隔 1 秒});}

在这个示例中，我们为 GET 请求添加了一个最多重试 3 次的选项，每次重试间隔 1 秒。当请求失败时，Axios 会自动重试，并在达到最大重试次数后抛出一个 Error 异常。我们可以在调用时捕获这个异常，以便进行错误处理。

添加请求取消功能

有时候，在用户操作过程中，可能需要取消正在进行的请求，例如在切换页面时取消上一次请求。为了实现这个功能，我们可以使用 Axios 的取消令牌 CancelToken 和取消函数 cancel，例如：

import axios,{ AxiosRequestConfig, AxiosResponse, CancelToken }from'axios';// 创建一个取消令牌const cancelToken = axios.CancelToken.source();// 封装 GET 请求，并添加请求取消功能exportfunction get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T>{const defaultConfig ={ params,...config,cancelToken: cancelToken.token };return axiosInstance.get<T>(url, defaultConfig);}// 取消请求exportfunctioncancelRequest(){
  cancelToken.cancel('请求已取消');}

在上面的示例中，我们首先创建了一个取消令牌 cancelToken，然后将它添加到 GET 请求的配置中。在需要取消请求的时候，我们可以调用 cancelRequest 函数来执行取消操作。这样就可以在需要的时候随时取消正在进行的请求了。

添加请求缓存功能

有时候，一些请求的结果是不会经常发生变化的，例如用户的基本信息，这种情况下，我们可以使用请求缓存的功能，避免重复请求，提高系统的性能。这可以通过缓存请求结果来实现，例如：

import axios,{ AxiosRequestConfig }from'axios';// 缓存请求结果的 Map 对象const cacheMap =newMap<string, any>();// 封装 GET 请求，并添加请求缓存功能exportfunction get<T>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T>{const cacheKey = url +JSON.stringify(params);const cacheData = cacheMap.get(cacheKey);if(cacheData){return Promise.resolve(cacheData);}const promise = axiosInstance.get<T>(url,{ params,...config });
  promise.then((res)=> cacheMap.set(cacheKey, res.data));return promise;}

在这个示例中，我们创建了一个缓存请求结果的 Map 对象 cacheMap，在 GET 请求时，我们先根据请求 URL 和参数生成一个缓存键 cacheKey，然后在缓存对象中查找是否存在对应的缓存数据，如果有则直接返回，否则发送请求，并将请求结果缓存到 cacheMap 对象中。

这样，下次发起相同的请求时，如果缓存中存在对应的数据，就可以直接返回缓存数据，避免了不必要的网络请求，提高了系统的性能。

Axios请求的优化的一些建议

1. 使用拦截器批量处理请求和响应数据。 如果我们需要对请求和响应进行一系列的处理，那么每个请求都单独处理会导致代码重复和维护成本增加。可以通过使用拦截器来统一处理，减少代码重复。例如，可以在请求拦截器中添加公共请求头，或者在响应拦截器中统一处理错误信息等。
2. 合并请求，减少网络请求次数。 对于一些需要发送多个请求的场景，可以将多个请求合并成一个请求，减少网络请求次数，提高系统性能。例如，可以使用 axios.all 或者 Promise.all 方法来合并多个请求。
3. 使用 Axios 的并发请求功能。 在需要发送多个请求的时候，可以使用 Axios 的并发请求功能来同时发送多个请求，提高系统性能。例如，可以使用 axios.spread 方法来同时处理多个请求的响应结果。
4. 配置全局默认参数，避免重复设置。 如果在大部分请求中使用了相同的配置参数，可以将这些参数设置为全局默认参数，避免在每个请求中重复设置。例如，可以通过 axios.defaults 来设置默认的请求超时时间、公共请求头等参数。
5. 使用第三方插件来扩展 Axios 功能。 如果需要使用更多的功能，可以通过使用第三方插件来扩展 Axios 的功能。例如，可以使用 axios-mock-adapter 来模拟后端接口，或者使用 axios-retry 来实现请求重试功能。

版权为 OpenAI 的 ChatGPT 模型