本文将从泛型入手，然后了解 Axios 中的部分类型，延续 JS 版本的极简风，教你封装出一个可用的清爽版 Axios。

屋里美团的姑娘喊我帮她写前端，忙到凌晨两点的我苦不堪言。为此我写了这篇文章《axios封装》希望他们在未来写出更好的前端代码。

前言 本文大纲 本文主旨是基于 Typescript 和 Axios ，设计编写一套实用性强的API 层架构。整个设计过程会分三个章节去讲解： 基础篇：借助 Typescript 以及 高阶函数 实现

axios取消重复请求： 相同的接口在上一个pending状态时，自动取消下一个请求； 请求失败重试： 接口请求后台异常时候，自动重新发起多次请求；请求接口数据缓存：接口在设定时间内不会向后台获取数据

使用 TypeScript 对 Axios 进行二次封装，不改变原有用法进行扩展，让API接口封装和调用更简单更自由，并提供完善强大的类型支持。

灵感来源 写d4axios的灵感来源于open-figen，现在功能还没有那么丰富，但是足以应付多大多数的场景，比如上传、下载、get、post等等请求，配合上ts，可以解决数据类型前后台一致性，数据

回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。 在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的…

Axios 相信对Vue熟悉的铁汁对它不会感到陌生了，这简直就是前端近年来的一大杀器，使用人数一直不断上涨。

这篇文章封装的axios已经满足如下功能： 无处不在的代码提示； 灵活的拦截器； 可以创建多个实例，灵活根据项目进行调整； 每个实例，或者说每个接口都可以灵活配置请求头、超时时间等。