什么是Axios.js,我为什么要关心?

去得到它的男孩,如果不能的话,让我知道为什么!

作为一个主要是自学成才的开发人员,我通过它的步伐为免费/付费互联网教程的广阔世界提供了便利。 在执行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比其他任何东西都可以改善生活质量。 但是,对工作流程进行许多细微的,渐进的生活质量调整可以大大提高开发质量和速度。