做网站工资多少钱,陕西省西安市建设局网站,网站开发人员调试,WordPress文章批量生成器本案例旨在教授如何使用Axios库结合TypeScript泛型进行HTTP请求的高级封装#xff0c;以提升代码的可复用性和类型安全性。我们将通过一个具体的示例#xff0c;学习如何创建一个通用的请求函数#xff0c;它能够适应不同类型的API响应#xff0c;并在请求前后加入自定义逻… 本案例旨在教授如何使用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 ApiResponseT any {code: number;msg: string;timestamp: number;data: T;
}
5. 封装请求函数
泛型request函数创建一个异步的泛型函数request它接受请求配置并返回经过类型转换的响应数据。
export async function requestT(config: AxiosRequestConfig): PromiseT {return axiosInstance.requestApiResponseT(config).then(res res.data);
}
6. 使用封装的请求函数
具体请求示例定义一个数据模型Hot并使用request函数发起请求处理响应数据
interface Hot {name: string;url: string;hot: number;
}requestArrayHot({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 : AxiosResponseany) {return res;
}, (error) {return Promise.reject(error);
});/* 定义接口 */
export interface ApiResponseT {code: number;msg: string;timestamp: number;data: T;
}/* 封装实例的请求方法 */
export async function requestT(config: AxiosRequestConfig ) {// axios实例的 request 接受的第一个泛型参数就是返回数据data的类型return axiosInstance.requestApiResponseT(config).then((res) res.data);
}/* 如何使用代码如下 */
interface Hot {name: string;url: string;hot: number;
}requestArrayHot({url: /baiduhot,method: get
}).then(res {if(res.code 200) {let hot res.data[0];console.log(hot.name);}
});提示更多的Axios配置信息请看官网
