前言
随着vue3的不断推行，越来越多的小伙伴开始加入typescript的怀抱中,开始享受类型化带来的好处。 axios 是常见的ajax库，然而我发现很多小伙伴在使用它的时候打开姿势不太对，导致并没有享受到类型化带来的好处，例如参数字段校验，返回类型自动推导等。 如果你也正在被这些问题困扰的话，那就请继续阅读下去吧。
本文并不会讨论拦截器的相关知识，因为那不是本文的重点。
作者只是一个菜鸟，文中如有错误的地方，欢迎大家指正。
需求
假设我们有一个后端api接口,它就是一个简单的加法接口，接受两个加数，返回一个包含加数以及结果的一个json对象
请求格式
url: '/api/test-plus'
methods: 'post'
data: {a:2,b:3}
请求成功的返回格式是一个json数据：
{
code:0,
message:"",
data:{
a:2,
b:3,
result:5
}
}
我们后续的封装都是为了让我们在请求这个接口的时候，代码能推断出返回的结构。
实现参数约束和返回值推导
首先为我们的ts工程参加一个./src/demo.ts文件,并且写一份不带类型参数的代码:
import axios from "axios";
// 创建一个axios实例
const instance = axios.create();
// 通用的请求函数
export async function request(config: any) {
return instance.request(config).then((res) => res.data.data);
}
export async function testApi(data: any) {
return request({
url: "/api/test-plus",
method: "POST",
data: data,
});
}
// 调用这个接口
testApi({ a: 2 }).then((res) => {
console.log(`${res.a} + ${res.b} = ${res.resut}`);
});
乍一看，这段代码似乎没有什么问题，但细细看的话，你会发现有两个不足之处:
- 在最后一行我们调用接口的时候,本来应该传
{a:2,b:3}，但是我们只传了{a:2}，在传给后端以后会报错。 - 在打印结果的时候，
res.resut拼写错误，到运行时的时候会出现undefined。 细想之下，由于我们没有约定testApi的参数，所以理论上我们无论传什么给testApi都行，同时.then(res)中，res推断出来的是any类型，导致我们在写形如res.这样的代码的时候，编辑器也并不会给我们提示，这样的ts代码简直让人无法接受。
那么我们要该如何约束他们呢?
首先我们约束一下参数:
interface IPlusParams {
a: number;
b: number;
}
export async function testApi(data: IPlusParams) {
return request({
url: "/api/test-plus",
method: "POST",
data: data,
});
}
我们添加了IPlusParams接口，并形参data，这样依赖，typescript就会抱怨调用testApi的时候testApi({ a: 2 })传入的参数不对。
这就足够了吗？ no no no! 我们不仅想约束data的类型，同时我们希望在写
request({
url: "/api/test-plus",
method: "POST",
data: data,
});
这样的代码的时候,我们的编辑器能自动提示，比如我们敲下u,编辑器就给我们提示url。那么要怎么做呢? 很简单，我们为 request函数的参数config添加约束即可。
import axios, { AxiosRequestConfig } from "axios";
// 通用的请求函数
export async function request(config: AxiosRequestConfig) {
return instance.request(config).then((res) => res.data.data);
}
这样一来，我们写配置的时候就会有智能提示了，并且书写错误的时候也会有警告。
以下是AxiosRequestConfig定义的参考
export interface AxiosRequestConfig<D = any> { url?: string; method?: Method; baseURL?: string; transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[]; transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[]; headers?: AxiosRequestHeaders; params?: any; paramsSerializer?: (params: any) => string; data?: D; timeout?: number; timeoutErrorMessage?: string; withCredentials?: boolean; adapter?: AxiosAdapter; auth?: AxiosBasicCredentials; responseType?: ResponseType; xsrfCookieName?: string; xsrfHeaderName?: string; onUploadProgress?: (progressEvent: any) => void; onDownloadProgress?: (progressEvent: any) => void; maxContentLength?: number; validateStatus?: ((status: number) => boolean) | null; maxBodyLength?: number; maxRedirects?: number; socketPath?: string | null; httpAgent?: any; httpsAgent?: any; proxy?: AxiosProxyConfig | false; cancelToken?: CancelToken; decompress?: boolean; transitional?: TransitionalOptions; signal?: AbortSignal; insecureHTTPParser?: boolean; }
接下来，我们约束返回值。
interface IPlusParams {
a: number;
b: number;
}
interface IPlusReturnValue extends IPlusParams {
result: number;
}
export interface IResponseData {
code: number;
message: string;
data: IPlusReturnValue;
}
// 通用的请求函数
export async function request(config: AxiosRequestConfig) {
return instance.request<ResponseData>(config).then((res) => res.data.data);
}
我们定义一个 IResponseData为axios的数据类型，其中 data字段约束为 IPlusReturnValue。它继承自IPlusParams，然后我们将instance.request的泛型参数约束为IResponseData。这样一来，编译器就能自动推断出 .then((res) => res.data.data);中res.data的类型为IResponseData，res.data.data 的类型为IPlusReturnValue
由于函数能自动推导返回值，所以我们的request函数和testApi函数现在能自动推导出返回类型:
也就是说，testApi现在能推导出返回值为Promise<IPlusReturnValue>了。我们在调用testApi函数调时，便可以推导出res形参是IPlusReturnValue类型。
同时，我们此前出现的拼写错误的bug编译器也给我们识别出来了。到这里我们的已经达成了我们预定的小目标。
编写更通用的request 函数
在上面的代码中我们已经能正确地推断出testApi的参数类型和返回类型了，但是还有改进的地方吗? 答案是有。
export interface IResponseData {
code: number;
message: string;
data: IPlusReturnValue;
}
目前为止,我们的IResponseData 中的data是写死的IPlusReturnValue类型，这显然是不合理的，我们需要一个更普遍的接口，所以这里我们引入泛型。
export interface IResponseData<T = any> {
code: number;
message: string;
data: T;
}
// 改造为泛型接口
export async function request<T>(config: AxiosRequestConfig) {
return instance
.request<IResponseData<T>>(config) // 这里是重点
.then((res) => res.data.data);
}
// 显式传入泛型参数 IPlusReturnValue
export async function testApi(data: IPlusParams) {
return request<IPlusReturnValue>({
url: "/api/test-plus",
method: "POST",
data: data,
});
}
我们将IResponseData接口改造成泛型接口，将data的类型改为动态传入，然后将request函数也改造泛型函数，然后在testApi内部，显式传入IPlusReturnValue。这样一来就实现了request函数的通用性改造。
现在，假如我们有一个新的接口，返回一个随机字符串数组
请求格式
url: '/api/test-list'
methods: 'get'
请求成功的返回格式是一个json数据，其中data是字符串数组：
{
code:0,
message:"",
data:["xxx"]
}
那么我们只需新增一个接口函数
export async function testApi2() {
return request<string[]>({
url: "/api/test-list",
method: "GET",
});
}
testApi2().then((list) => {
list.forEach((a) => console.log(a));
});
编译器能正常地推测出.then(list)中list的类型是string[]。
到这一步我们就编写了一个更加通用版本的 request 函数。
完整代码
import axios, { AxiosRequestConfig } from "axios";
// 创建一个axios实例
const instance = axios.create();
// 泛型接口,T的类型支持
export interface IResponseData<T = any> {
code: number;
message: string;
data: T;
}
// 通用的请求函数
export async function request<T>(config: AxiosRequestConfig) {
return instance
.request<IResponseData<T>>(config)
.then((res) => res.data.data);
}
interface IPlusParams {
a: number;
b: number;
}
interface IPlusReturnValue extends IPlusParams {
result: number;
}
export async function testApi(data: IPlusParams) {
return request<IPlusReturnValue>({
url: "/api/test-plus",
method: "POST",
data: data,
});
}
// 调用这个接口
testApi({ a: 2, b: 3 }).then((res) => {
console.log(`${res.a} + ${res.b} = ${res.result}`);
});
export async function testApi2() {
return request<string[]>({
url: "/api/test-list",
method: "GET",
});
}
testApi2().then((list) => {
list.forEach((a) => console.log(a));
});
总结
本文通过一个小案例，为封装了一个request函数，使得我们在使用axios能享受到类型编程带来的福利，主要的方法就是利用泛型机制，增加函数的通用性。
作者是一个正在学习ts的菜鸟，本文是我在学习ts的过程中的一点小总结，如果本文有什么错误的地方，欢迎大家指正，如果觉得有帮助的话，记得点个✨ 👍 ✨，谢谢各位！
