axios
如果你还是对Promise比较生疏,那你对axios的深入了解一定会存在一些壁垒,更是难以对Axios进行上层封装,因此推荐先阅读了解Promise,再上手axios
资料:
axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。在Web端本质上就是Ajax + Promise,服务端是htttp + Promise
一、理解Axios为什么兴起
- 完美的结合Promise 的使用,在fetch兼容性不强的现在,axios几乎是最好的过渡方案
- 可以同时在浏览器和服务器上使用
- 支持非常多的人性化特性,可配置性强(封装的比较好)
二、怎么使用
(1) axios 是对象也是函数
接下来可能涉及两个名词但是意义不一样:Axios,axios
大部分的库都是通过闭包生成一个类,再向window对象绑定暴露,但是axios并没有,因此我认为有两个原因:
-
Axios 指的是 axios.prototype.constructor.Axios,它是真正能够单独的发送请求,拥有各种请求方法 get、delete、patch、put、post、request等方法,但是显然如果只是拥有这些方法,根本不够用户使用比如竞争和同时发送请求问题。然而一旦将这些方法耦合到Axios原型上,又先得Axios不够优雅,于是axios产生了,它能管理各个Axios实例,也能同时处理多个Axios实例比如 axios.all、axios.spread
-
axios如果只是有处理多个Axios实例实例的能力,如果只是希望单个请求任务,哪有多了一层访问
(new axios.prototype.constructor.Axios).method()
这显然不合理,于是Axios原型上的方法经过改造绑定在axios,至此axios功能齐全 -
在接下来的使用中,你会发现axios的使用和jquery的ajax很像,这也许是设计者对于JQ使用量极大,在语法上兼容的考量吧(这只是笔者个人的猜想)
-
axios的结构图 => axios.prototype
-
axios是一个函数对象,但是文档并没有表明new axios可以产生新的axios实例(如果你细心一点,可以注意到axios的原型prototype几乎是一个空对象),而是通过
axios.create(config)
(2) axios 为什么需要 create
axios是一个实例对象,axios.create相当于是这类对象的“构造函数”,每个实例应该保存内部属性,当调用方法时通过传入配置参数,将外部属性和实例内部属性合并,最后发送请求
因此,对axios来说是有很多内部属性都可以配置的,但是一旦改变axios属性,意味着以后所有的通过axios实例发出的请求,都会将外部配置和当前axios实例内部配置合并,这是非常可怕的。比如
//假设最开始,由于服务器1网速比较快,连接时间就可以比较短,于是你设置axios内部属性timeout 为 3000
axios.defaults.timeout = 3000
//但是由于新增业务,你要向服务器2网速比较慢,连接时间就可以比较长,于是你设置axios内