Axios原理之一：如何实现多种请求方式
自从 Axios 成功打入 Vue 全家桶之后，便开始火的一塌糊涂！截止到目前，其在 github 上的 star 即将突破 80k ！可以说 Axios 是当下前端界最流行的 ajax 请求库，可(jue)能(dui)没有之一！
即然 Axios 人气如此之高，那么阅读并研究它的源码也是非常有必要的，因为这样不仅可以让自己少走很多弯路，还会对作者多年的编程思想以及经验进行猎取，从中抽象出一些架构及模式性的高级内容，最终提高自己的实现能力和技巧，让自己变得更加强大！
啰嗦一句：阅读源码确实可以提升自身的编码水平，但需要你拥有一定相关经验基础以及相对领域的认知，否则看源码绝对是在浪费时间！为什么？因为你可能看不懂！
本系列文章将会对 Axios 源码思想进行精简提炼，从而将大家所关心的一些内部原理问题进行解答。
一、封装一个简易版本的 xhr + promise 的异步 ajax 请求库
由于 axios 是一个基于 xhr + promise 的异步 ajax 请求库，所以咱们可以先单纯的封装一个：
以上代码实现了axios(config) 直接发起请求，例如：
但是，如果我想通过axios.get、axios.post 等请求方式就行不通了。
二、封装 request
通过阅读源码得到一些启示：源码中有一个名为Axios的构造函数，而我们的 xhr + promise 便封装在 Axios.prototype.request 函数中。另外我们所使用的 axios.get、axios.post 等也都是定义在 Axios.prototype 中。
根据这些启示将代码调整为：
这样我们终于可以通过axios.get、axios.post请求数据了
但是 axios(config) 又不行了。
三、createInstance 函数
继续攻读源码发现：axios 本质不是 Axios 构造函数的实例，而是一个函数名字为 createInstance 的函数对象，在该函数中实例化了Axios。也就是说：我们所使用的axios并不是Axios的实例，而是Axios.prototype.request 函数 bind() 返回的函数。
四、axios 实现多种请求方式原理完整代码：
❤️ 看完两件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我两个小忙：
点个「赞」或者「转发评论」，让更多的人也能看到这篇内容（喜欢不点赞，都是耍流氓 -_-）
关注公众号「前端知识分享喵」，不定时更新前端技术分享，
公众号后台回复「电子书」即可免费获取精选的前端电子书。
添加 MagnumHou 微信，可以获取 up 主有的大机构的学习视频哦
