下面是一个简单的 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请求的优化的一些建议
- 使用拦截器批量处理请求和响应数据。 如果我们需要对请求和响应进行一系列的处理,那么每个请求都单独处理会导致代码重复和维护成本增加。可以通过使用拦截器来统一处理,减少代码重复。例如,可以在请求拦截器中添加公共请求头,或者在响应拦截器中统一处理错误信息等。
- 合并请求,减少网络请求次数。 对于一些需要发送多个请求的场景,可以将多个请求合并成一个请求,减少网络请求次数,提高系统性能。例如,可以使用 axios.all 或者 Promise.all 方法来合并多个请求。
- 使用 Axios 的并发请求功能。 在需要发送多个请求的时候,可以使用 Axios 的并发请求功能来同时发送多个请求,提高系统性能。例如,可以使用 axios.spread 方法来同时处理多个请求的响应结果。
- 配置全局默认参数,避免重复设置。 如果在大部分请求中使用了相同的配置参数,可以将这些参数设置为全局默认参数,避免在每个请求中重复设置。例如,可以通过 axios.defaults 来设置默认的请求超时时间、公共请求头等参数。
- 使用第三方插件来扩展 Axios 功能。 如果需要使用更多的功能,可以通过使用第三方插件来扩展 Axios 的功能。例如,可以使用 axios-mock-adapter 来模拟后端接口,或者使用 axios-retry 来实现请求重试功能。
版权为 OpenAI 的 ChatGPT 模型
版权归原作者 一个喜欢串串的男人 所有, 如有侵权,请联系我们删除。