云网站建站技能培训

      本案例旨在教授如何使用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配置信息请看官网