利用Axios封装及泛型实现定制化HTTP请求处理

      本案例旨在教授如何使用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 ApiResponseany> {
    code: number;
    msg: string;
    timestamp: number;
    data: T;
}

5. 封装请求函数

• 泛型request函数：创建一个异步的泛型函数request，它接受请求配置并返回经过类型转换的响应数据。 

export async function request(config: AxiosRequestConfig): Promise {
    return axiosInstance.request<ApiResponse>(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 {
    code: number;
    msg: string;
    timestamp: number;
    data: T;
}
 
 
 
/* 封装实例的请求方法 */
export async function request(config: AxiosRequestConfig ) {
    // axios实例的 request 接受的第一个泛型参数，就是返回数据data的类型
    return axiosInstance.request<ApiResponse>(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配置信息请看官网