前言
相信大家在做前端开发的时候都使用过axios这款优秀的网络请求库，可以说几乎每个前后分离的项目都应该离不开他。
众所周知，在使用 javascript 开发的时候，由于语言本身的问题，对数据类型支持不是很友好，尤其是在对象字段很多的时候很容易写错，从而造成一些很难排查的bug。
好在，现在有 typescript 语言的出现弥补了 javascript的这一缺陷。然后配合着IDE很多类型的问题都会被避免。
但是typescript相对于 javascript 上手不是很容易，尤其是前期初学者，会被各种类型检查和红线而折磨甚至最后不得不回退到javascript上来。的确，在刚开始学习的时候肯定会有这样或者那样的问题，不过希望大家坚持一下只有克服了各种问题能力才能成长。
本章内容我们会介绍 typescript 中的泛型功能如何和在axios中应用。
ts中的泛型简单介绍
因为本节不是介绍泛型的，所以关于更多泛型介绍，这里就不多说了，只是简单介绍一下，更多的知识大家可以去 typscript 官网查一下文档。
什么是泛型呢？泛型简单来说就是类型变量，在ts中存在类型，如number、string、boolean等。泛型就是使用一个类型变量来表示一种类型，类型值通常是在使用的时候才会设置。泛型的使用场景非常多，可以在函数、类、interface接口中使用
为什么使用泛型?TypeScript 中不建议使用 any 类型，不能保证类型安全，调试时缺乏完整的信息。
TypeScript可以使用泛型来创建可重用的组件。支持当前数据类型，同时也能支持未来的数据类型。扩展灵活,可以在编译时发现类型错误，从而保证了类型安全。
axios与ts泛型
在开始下面的内容的时候，先说以下几点：
1、以下axios与ts泛型的结合使用方式只是个人在VueAdminWork框架中的使用方式可能不具有广泛的代表性。不喜勿喷
2、在开始以下知识的时候，我们假定您已经具备 typescript 和 axios的相关知识
下面正式开始，我主要是以在 VueAdminWork框架的封装使用为例向大家介绍。
1.定义一个数据类型
我们以下面的数据类型为例：角色数据类型，这个比较简单好理解。
interface RoleModeType { roleName: string roleCode: string description: string }
2.再看一下封装的axios操作api
export interface HttpOption { url: string data?: any method?: string headers?: any beforeRequest?: () => void afterRequest?: () => void } // 定义返回数据类型的泛型 T，默认值是 any export interface Response<T = any> { totalSize: number | 0 code: number msg: string data: T } // 定义返回数据类型的泛型 T，默认值是 any function http<T = any>({ url, data, method, headers, beforeRequest, afterRequest }: HttpOption) { const successHandler = (res: AxiosResponse<Response<T>>) => { if (res.data.code === 200) { return res.data } throw new Error(res.data.msg || '请求失败，未知异常') } const failHandler = (error: Response<Error>) => { afterRequest && afterRequest() throw new Error(error.msg || '请求失败，未知异常') } beforeRequest && beforeRequest() method = method || 'GET' const params = Object.assign(typeof data === 'function' ? data() : data || {}, {}) return method === 'GET' ? request.get(url, { params }).then(successHandler, failHandler) : request.post(url, params, { headers: headers }).then(successHandler, failHandler) } // 定义返回数据类型的泛型 T，默认值是 any export function get<T = any>({ url, data, method = 'GET', beforeRequest, afterRequest, }: HttpOption): Promise<Response<T>> { return http<T>({ url, method, data, beforeRequest, afterRequest, }) } // 定义返回数据类型的泛型 T，默认值是 any export function post<T = any>({ url, data, method = 'POST', headers, beforeRequest, afterRequest, }: HttpOption): Promise<Response<T>> { return http<T>({ url, method, data, headers, beforeRequest, afterRequest, }) }
以上代码是我个人封装的在VueAdminWork框架使用的情况，大家可以根据自己的理解进行封装。另外，这里只是封装了 `get` 和 `post` 两种请求方法，更多的请求方法可以自己再次封装。
3. 在 .vue 文件中使用
先来看一下提示功能，当然不只有提示功能这么简单，更重要的是数据安全和减少错误概率
const dataList = ref<Array<RoleModeType>>() function doRefresh() { // 在使用的时候，要指定上面我已经定义好的数据类型。 post<Array<RoleModeType>>({ url: getRoleList, data: {}, }) .then((res) => { // table.handleSuccess(res) dataList.value = res.data }) .catch(console.log) }
可以看到 res.data 就已经是我们指定好了的 `RolaModeType[]` 类型
再来看一下如果数据类型指定不一致的情况：
interface RoleModeType1 { roleName1: string roleCode1: string description1: string } const dataList = ref<Array<RoleModeType1>>() function doRefresh() { post<Array<RoleModeType>>({ url: getRoleList, data: {}, }) .then((res) => { // 这里会报错 dataList.value = res.data }) .catch(console.log) }
错误信息如下
写在最后
总的来说 typescript 中的 泛型还比较简单的，大家多用几次就可以熟练掌握，但是如果想要用好 ts ，还需要大家的不断努力。
最后我们总结一下在axios中使用泛型的几步：
1. 定义好一个数据类型
2.封装好axios的具体的操作。当然也可以不封装使用，axios已经为我们提供好了接口，可以很容易使用。
3. 在具体的 vue 组件或者页面中使用，传入具体的泛型类型
4. 最后可以通过IDE进行测试一下泛型有没有使用成功，看一下有没有提示就可以了
