axios是一个非常流行的http请求库，而在typescript当中，使用泛型可以为axios的请求和响应去添加更为强大的类型约束。
那么什么是泛型？
泛型 (Generics) 允许你编写可以适用于不同类型的代码，以增强代码的重用性和灵活性泛型可以在函数、类和接口中使用，它们可以用来定义参数类型、返回值类型或类成员的型。通过使用泛型，可以在不同的地方使用相同的逻辑和算法，但适用于不同类型的数据。泛型的基本语法是使用尖括号
那么如何使用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
定义一个类型接口
查看以上接口，我们定义了请求参数类型为GetTodoInfoParams 响应数据类型为TodoInfo
//请求参数类型
interface GetTodoInfoParams {
id:number;
}
//响应数据类型
export interface TodoInfo {
userId: number;
id:number;
title:string;
completed: boolean;
}
//进行数据的一个获取 GetTodoInfoParams为参数 TodoInfo为返回的对象
export const getTodoInfo:BaseRquest
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
useEffect(() => {
//进行参数的传递
getTodoInfo({id:12})
//response 响应内容
.then((response) => {
const todo: TodoInfo = response.data;
setTodo(todo);
}
//如遇到错误内容 则进行错误打印
.catch((error) => {
console.log(error);
});
},[]);
}
（3）使用
为什么会有？，因为我们设置的是联合数据类型，所以会自动添加一个可选项？内容
{ todo?.title }
{ todo?.completed.toString() }
以上就是axios和typescript进行一个完美的结合，采用泛型和type类型进行一个整合，这时候，就会有一个强大的类型约束，当我们应用的时候，有非常安全的安全性和歧视性进行代码的一个协助操作，帮助我们开发人员能够提高一个更好的编程和代码的可读性，能够让我们的项目变得更为得健壮。
推荐阅读
发表评论