axios和Axios的关系（源码分析）

最新推荐文章于 2023-09-08 23:35:54 发布

懵懵懂懂学前端

最新推荐文章于 2023-09-08 23:35:54 发布

阅读量973

点赞数 2

文章标签：前端 javascript 开发语言 ajax es6

本文链接：https://blog.csdn.net/qq_56966124/article/details/127586331

版权

首先介绍一下axios，axios是目前比较流行的一个js库，是一个基于promise的网络数据请求库，主要用于发送网络数据请求，从后台服务器上获取数据返回给前端。

学习JS的猿友都应该知道，在JS中有构造函数这个概念，从函数定义上看它和普通函数好写没啥区别，只不过我们为了区分普通函数和构造函数，一般将构造函数的首字母大写，以便区分，这也是一个墨守成规的规矩，行内人都懂了。

axios和Axios的关系呢，给人的第一感觉肯定是觉得axios就是通过new Axios()创建出来的，但是呢，事实不是这样的，当然，它的底层实现原理的确和new Axios（）有关，但不是直接的关系。从语法上来说：axios不是Axios的实例对象，但是从功能上来说：axios是Axios的实例。

axios的常用几种方式就是：

axios.get(url,config); url表示请求地址，config表示配置对象
axios.post(url,config)

axios(config)

从上面可以看出axios既可以当函数axios()使用又可以当对象axios.get()使用，这也算是axios封装思想的厉害之处了，原理其实很简单：

实质上axios是一个函数，但函数也属于是一个对象，所以同样可以向它身上追加属性和方法，我们所使用的axios是通过createInstance这个函数创造出来的，它简单实现的源码如下

说白了，createInstance才是axios的”亲娘“，特别值得注意的是，这里借助了bind方法，特意规定了this的指向，context是通过new Axios()创造出来的Axios真正的实例对象，它身上有Axios实例对象的所有属性，然后通过Axios.prototype.request.bind(context),返回一个函数由instance变量接收，最后再将Axios实例对象（context）上有的属性和方法以及Axios显式原型上的方法追加到instance身上，（context就相当于是一个工具人，只是为了将Axios实例对象身上的属性和方法添加到instance身上），这里还借助了Object.keys(obj)这个API（ES6中提出来的一个新API）,它的作用是获取到obj这个对象身上的所有属性名称，然后通过foreach遍历将该对象身上的属性添加给instance，从而使instance身上有了和Axios实例对象一样的属性和方法，所以我们说axios在功能上是Axios的实例，但从语法上来说不是它的实例对象。注意：在函数的最后返回instance就是我们平时用的axios（雏形）！！！

这时肯定有小伙伴问：那是不是只要通过createInstance（）创造出来的就是axios呢？？额额额......咱不能这么说，因为我们平时用的axios实际上是一个功能强大的对象，因为它的创造，不只是有上面这些过程，它还有很多锦上添花的操作，比如：给axios身上再添加更多的功能函数，使其功能更加强大，例如：axios.create()，这个函数就是后面额外添加到axios身上的，单纯通过createInstance（）创建的对象不具有这个函数。通过createInstance创建出来的对象只不过是我们所熟悉的axios的雏形，也可以将其理解为”小axios“，但是它不是我们平时所使用的那个axios对象。

在实际项目中，我们通常也会用到这个createInstance()来创造一个”小axios“，因为他创建出来的对象也是可以发送请求的，只不过功能没有axios那么齐全而已。既然有axios可以使用，那我们为什么还要创建一个”小axios“来使用呢？因为在项目中通常需要配置代理，比如在vue中就需要配置代理服务器，不然向别的服务器请求资源时就会存在跨域问题，使得前端不能正常获取到资源。我们通过给"小axios"设置一个默认路径：axios.default.BASEURL = ‘xxxxxxxx’,在发送请求时就可以少写一点地址。下图是vue项目中简单的配置代理服务器

在这里我们就可以看到”小axios“了，service就是创造出来的”小axios“，他也是具有发送网络数据请求的功能，将它config配置对象中的baseURL改为我们上面配置好的前缀名（/new-api、/dev-api就是前缀名）使用的前缀名不同就代表向不同的服务器发送请求获取数据。如果我们不借助”小axios“的话，那么就只有一个axios，就很不方便实现配置代理。