axios理解和使用

axios

如果你还是对Promise比较生疏，那你对axios的深入了解一定会存在一些壁垒，更是难以对Axios进行上层封装，因此推荐先阅读了解Promise，再上手axios

资料：

• axios 中文说明
• axios 官网

axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。在Web端本质上就是Ajax + Promise，服务端是htttp + Promise

一、理解Axios为什么兴起

• 完美的结合Promise 的使用，在fetch兼容性不强的现在，axios几乎是最好的过渡方案
• 可以同时在浏览器和服务器上使用
• 支持非常多的人性化特性，可配置性强（封装的比较好）

二、怎么使用

(1) axios 是对象也是函数

接下来可能涉及两个名词但是意义不一样：Axios，axios

大部分的库都是通过闭包生成一个类，再向window对象绑定暴露，但是axios并没有，因此我认为有两个原因：

1. Axios 指的是 axios.prototype.constructor.Axios，它是真正能够单独的发送请求，拥有各种请求方法 get、delete、patch、put、post、request等方法，但是显然如果只是拥有这些方法，根本不够用户使用比如竞争和同时发送请求问题。然而一旦将这些方法耦合到Axios原型上，又先得Axios不够优雅，于是axios产生了，它能管理各个Axios实例，也能同时处理多个Axios实例比如 axios.all、axios.spread

2. axios如果只是有处理多个Axios实例实例的能力，如果只是希望单个请求任务，哪有多了一层访问(new axios.prototype.constructor.Axios).method() 这显然不合理，于是Axios原型上的方法经过改造绑定在axios，至此axios功能齐全

3. 在接下来的使用中，你会发现axios的使用和jquery的ajax很像，这也许是设计者对于JQ使用量极大，在语法上兼容的考量吧（这只是笔者个人的猜想）

4. axios的结构图 => axios.prototype

   

5. 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内