axios理解和使用

最新推荐文章于 2024-11-30 18:08:29 发布

snakeZix

最新推荐文章于 2024-11-30 18:08:29 发布

阅读量1.9k

点赞数

分类专栏：前后端交互文章标签： ajax javascript

本文链接：https://blog.csdn.net/wucan111/article/details/112155860

版权

本文详细介绍了axios的兴起原因、使用方法及其实现的特性。讲解了axios如何结合Promise工作，以及在浏览器和服务器上的应用。重点探讨了axios的创建、配置、拦截器、错误处理和序列化等核心功能，帮助读者深入理解并熟练运用axios。

摘要由CSDN通过智能技术生成

axios

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

资料：

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

接下来可能涉及两个名词但是意义不一样：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)

axios是一个实例对象，axios.create相当于是这类对象的“构造函数”，每个实例应该保存内部属性，当调用方法时通过传入配置参数，将外部属性和实例内部属性合并，最后发送请求

因此，对axios来说是有很多内部属性都可以配置的，但是一旦改变axios属性，意味着以后所有的通过axios实例发出的请求，都会将外部配置和当前axios实例内部配置合并，这是非常可怕的。比如

//假设最开始，由于服务器1网速比较快，连接时间就可以比较短，于是你设置axios内部属性timeout 为 3000
axios.defaults.timeout = 3000 
//但是由于新增业务，你要向服务器2网速比较慢，连接时间就可以比较长，于是你设置axios内