深入理解Axios的TypeScript类型约束

axios是一个非常流行的http请求库，而在typescript当中，使用泛型可以为axios的请求和响应去添加更为强大的类型约束。

那么什么是泛型？

• 泛型 (Generics) 允许你编写可以适用于不同类型的代码，以增强代码的重用性和灵活性
• 泛型可以在函数、类和接口中使用，它们可以用来定义参数类型、返回值类型或类成员的型。通过使用泛型，可以在不同的地方使用相同的逻辑和算法，但适用于不同类型的数据。
• 泛型的基本语法是使用尖括号<T>来表示一个类型参数，T 可以是任意合法的标识符，代表待确定的类型

那么如何使用typeScript当中的类型别名和泛型定义通用的axios请求类型并且通过一个实例进行及用法的一个展示。

（1）定义

????????type类型别名的一个定义，定义一个BaseRequest，讲请求设置为一个泛型，分别T和V，T和V都是泛型类型中的一个约束。

????????此时，T和V我们并不知道其数据类型是什么，至于BaseRequest它的本质应该是一个函数，这个函数将会传递一个参数params（可选），类型为T。也就是请求类型与我们之前所设置的泛型当中的T类型是一一对应的。

? ? ? ? 如何BaseRequest请求函数将会返回一个请求的结果内容（应为Promise），promise返回的具体内容为AxiosResponse结果内容，AxiosResponse内容也是一个泛型，它这个类型将会返回一个就是我们所设置的一个V的泛型内容。

? ? ? ? T：表示请求参数类型和我们函数中params的参数? T是一一对应的

????????V：V表示响应类型，与函数返回的promise当中的AxiosResponse当中的V数据类型也是一一对应的。

import { AxiosResponse } from "axios";

type BaseRequest<T,V> = (params?:T) => Promise<AxiosResponse<V>>;

定义一个类型接口

查看以上接口，我们定义了请求参数类型为GetTodoInfoParams? ?响应数据类型为TodoInfo?

//请求参数类型
interface GetTodoInfoParams {
    id:number;
}

//响应数据类型
export interface TodoInfo {
    userId: number;
    id:number;
    title:string;
    completed: boolean;
}

//进行数据的一个获取   GetTodoInfoParams为参数  TodoInfo为返回的对象
export const getTodoInfo:BaseRquest<GetTodoInfoParams,TodoInfo> = (
    params
) => {
    //请求的地址
    return axios.get(`https://jsonplaceholder.typicode.com/todos/${params?.id}`);
}
    

以上请求地址的请求路径

（2）引入

import { TodoInfo,getTodoInfo } from '定义的文件路径'
import { useEffect,useState } from 'react'

const App = () => {
    //todo数据是数据请求之后数据返回的结果值
    const [todo,setTodo] = useState<TodoInfo | null>(null);  //联合数据类型 并且设置初始值为null
    useEffect(() => {
        //进行参数的传递
        getTodoInfo({id:12})
            //response 响应内容
            .then((response) => {
                const todo: TodoInfo = response.data;
                setTodo(todo);
            }
            //如遇到错误内容  则进行错误打印
            .catch((error) => {
                console.log(error);
            });
    },[]);
}

（3）使用

为什么会有？，因为我们设置的是联合数据类型，所以会自动添加一个可选项？内容

<p>{ todo?.title }</p>
<p>{ todo?.completed.toString() }</P>

以上就是axios和typescript进行一个完美的结合，采用泛型和type类型进行一个整合，这时候，就会有一个强大的类型约束，当我们应用的时候，有非常安全的安全性和歧视性进行代码的一个协助操作，帮助我们开发人员能够提高一个更好的编程和代码的可读性，能够让我们的项目变得更为得健壮。