绑定网站域名怎么做青岛网站建设维护
本案例旨在教授如何使用Axios库结合TypeScript泛型进行HTTP请求的高级封装，以提升代码的可复用性和类型安全性。我们将通过一个具体的示例，学习如何创建一个通用的请求函数，它能够适应不同类型的API响应，并在请求前后加入自定义逻辑（如错误处理、Token注入等）。
1. 引入必要的库和类型
- 引入Axios：首先，我们导入Axios库及其相关类型，用于发起网络请求。
- 定义类型：引入AxiosInstance和AxiosRequestConfig类型，以增强代码的类型提示和安全性。
import axios, { type AxiosResponse } from 'axios';
import type { AxiosInstance, AxiosRequestConfig } from 'axios';2. 创建Axios实例并配置
- 配置基础设置：通过axios.create方法创建一个Axios实例，并设置基础URL和超时时间等默认配置
const axiosInstance: AxiosInstance = axios.create({baseURL: 'https://tenapi.cn/v2/',timeout: 10000
});3. 添加请求和响应拦截器
- 请求拦截器：在请求发送前可以统一处理逻辑，如添加认证信息。
- 响应拦截器：对返回的响应进行统一处理，如错误码判断。
axiosInstance.interceptors.request.use(config => {// 可以在此处添加Token或其他请求头return config;
}, error => Promise.reject(error));axiosInstance.interceptors.response.use(res => res, error => Promise.reject(error));4. 定义API响应接口
- ApiResponse接口：定义一个泛型接口来规范API响应的结构，包含状态码、消息、时间戳和数据部分。
export interface ApiResponse<T = any> {code: number;msg: string;timestamp: number;data: T;
}5. 封装请求函数
- 泛型request函数：创建一个异步的泛型函数request，它接受请求配置并返回经过类型转换的响应数据。
export async function request<T>(config: AxiosRequestConfig): Promise<T> {return axiosInstance.request<ApiResponse<T>>(config).then(res => res.data);
}6. 使用封装的请求函数
- 具体请求示例：定义一个数据模型Hot，并使用request函数发起请求，处理响应数据
interface Hot {name: string;url: string;hot: number;
}request<Array<Hot>>({url: '/baiduhot',method: 'get'
}).then(res => {if(res.code === 200) {const hot = res.data[0];console.log(hot.name);}
});6. 完整代码
import axios, {type AxiosResponse} from 'axios';
import type { AxiosInstance, AxiosRequestConfig } from 'axios';/* 创建axios实例 */
const axiosInstance : AxiosInstance = axios.create({baseURL: 'https://tenapi.cn/v2/',timeout: 10000
});/* 封装实例的请求拦截器 */
axiosInstance.interceptors.request.use( config => {return config;
}, (error) => {return Promise.reject(error);
});/* 封装实例的响应拦截器 */
axiosInstance.interceptors.response.use( (res : AxiosResponse<any>) => {return res;
}, (error) => {return Promise.reject(error);
});/* 定义接口 */
export interface ApiResponse<T> {code: number;msg: string;timestamp: number;data: T;
}/* 封装实例的请求方法 */
export async function request<T>(config: AxiosRequestConfig ) {// axios实例的 request 接受的第一个泛型参数，就是返回数据data的类型return axiosInstance.request<ApiResponse<T>>(config).then((res) => res.data);
}/* 如何使用代码如下 */
interface Hot {name: string;url: string;hot: number;
}request<Array<Hot>>({url: '/baiduhot',method: 'get'
}).then(res => {if(res.code == 200) {let hot = res.data[0];console.log(hot.name);}
});
提示：更多的Axios配置信息请看官网