

作为一个主要是自学成才的开发人员,我通过它的步伐为免费/付费互联网教程的广阔世界提供了便利。 在执行HTTP请求的教程中,我一次又一次弹出的内容是使用一个称为Axios的JavaScript库。 我想了解为什么这么多的Web开发教育者都在使用这个看似不起眼的库。 因此,我决定深入探讨Axios所提供的功能以及为什么(可能)值得使用的一个非常简单明了的解释。
它能做什么
简而言之,Axios是一个Javascript库,用于从node.js发出HTTP请求或从也支持ES6 Promise API的浏览器发出XMLHttpRequests。 太好了,因此从我们那里收集到的信息可以做一些我们已经可以做的事情,并且最近做得更好。
它旨在改进的内容:.fetch()
在处理JSON数据时,提取使用两步过程。 发出初始请求后,您将需要在响应上调用.json()方法,以接收实际的数据对象。 如果要提取请求以为拼车采购应用程序找回相关驱动程序的对象,则可能会有以下内容:
const baseUrl ='http:// localhost:3000 / api / v1'fetch(`$ {baseUrl} / drivers`).then(res => res)
这将返回一个未决的promise和response对象,让我知道我的请求已成功,但是我的数据在哪里? 我们还必须记住将响应也传递给.json()方法。
const baseUrl ='http:// localhost:3000 / api / v1'fetch(`$ {baseUrl} / drivers`).then(res => res.json())
现在这没什么大不了的,就像很多事情一样,它实际上归结为语法存储。 但是作为开发人员,我们同时是地球上最懒惰和最高效的生物-因此,任何速记或省时的方法都值得考虑,请进入Axios。
更好的错误处理
当使用.fetch()
正确记录响应错误时,我们需要付出一些额外的工作(同样,可以说这只是语法存储的问题)来获得期望的结果。 MDN解释:
当遇到网络错误或在服务器端未正确配置CORS时,
fetch()
承诺将以TypeError
拒绝,尽管这通常意味着权限问题或类似问题,例如404并不构成网络错误。
假设我们的baseUrl
变量有问题。 以下代码块的输出预期为error ,但是没关系。 为什么是这样?
const baseUrl ='http:// localhost:3000 / api / v1'fetch(` $ {baseUrl} /驱动程序 `)
.catch(错误=> console.log('确定'))
.then(res => console.log('error'));
事实证明, fetch()
仅在相对罕见的网络错误情况(例如DNS查找失败fetch()
拒绝承诺。 幸运的是, fetch()
提供了一个简单的ok
标志,用于指示响应的状态码是否在成功范围内。 通常,发生的事情是您最终将编写一个适合所有人的错误处理函数,以用于所有fetch()
调用。
安装Axios
这些天来,抓新库很容易(嗯,大黄),我更喜欢npm。 在项目文件夹的根目录中,打开终端,运行npm install axios
,一切npm install axios
。 现在,要实现与之前执行的相同的获取请求,我们可以调用axios.get()
代替我们的获取方法,如下所示:
const baseUrl ='http:// localhost:3000 / api / v1'axios.get(`$ {baseUrl} / drivers).then(res => res)
快点! 通过使用axios,我们无需将HTTP请求的结果传递给.json()方法。 Axios只是直接返回您期望的数据对象。 此外,HTTP请求中的任何类型的错误都将立即成功执行.catch()块。 这是所有主要功能的简要概述,包括一些我没有直接从GitHub页面覆盖的内容:
- 从浏览器发出XMLHttpRequests
- 从node.js发出HTTP请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- JSON数据的自动转换
- 客户端支持以防止XSRF
总而言之,Axios比其他任何东西都可以改善生活质量。 但是,对工作流程进行许多细微的,渐进的生活质量调整可以大大提高开发质量和速度。