什么时候需要 axios？

介绍

基础知识

axios一些优势fetch

概括

介绍

今年早些时候，我在一个训练营担任全栈软件工程讲师时，一位学生问我为什么axios在我的一个教程中使用了。这篇帖子就是我的回应。他觉得它很有帮助，建议我把它发布到网上帮助其他人（我在原回复的基础上添加了更多内容）。
另外，由于这周我无法为我的YouTube 频道录制任何内容，所以想提高效率，所以写了这篇帖子。

基础知识

首先，axios和fetch都是用于处理 http 请求的，并且都返回一个Promise。
所以它们都可以和 一起使用，async-await因为async-await只是处理 Promise 的语法糖，而不是使用then-catch块。

axios是 的替代品fetch。fetch是浏览器自带的用于处理 http 请求的默认 http 客户端。

axios一些优势fetch

axios是您必须安装的第三方 npm 包，它有一些优点，我们将在本文中讨论。

默认 JSON 解析

电影搜索应用中最显著的一个特点是，使用(unlike )时无需调用res.json()响应，因为axios 会自动处理响应。这意味着 axios 默认将响应解析为 JSON。axiosfetchaxios

// Using fetch
async function loadUserFetch() {
  try{
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1")
    const data = await response.json(); // Manually Parse JSON
    console.log(data)
  }catch(error) {
    console.log(error.message)
  }
}

// Using axios
async function loadUserAxios() {
  try{
    const response = await axios.get("https://jsonplaceholder.typicode.com/users/1")
    console.log(response.data) // Already parsed by axios
  }catch(error) {
    console.log(error.message)
  }
}

哇哦！太棒了。这么说我只省了一行代码？呼！谢谢。

好吧，fetch代码可以写成一行，如下所示：

const data = await (await fetch("https://jsonplaceholder.typicode.com/users/1")).json()
console.log(data)

需要注意的重点不是axios省去那一行额外的代码，而是axios默认解析返回的响应。

axios在浏览器窗口内外均可工作

等一下，让我解释一下我的意思。
fetch只能在浏览器中工作。

为什么会这样？

嗯，fetch是 window 对象的一个​​方法，即：window.fetch()。window
对象有很多很酷的方法和属性，它们增加了更多功能，让你可以在浏览器中使用 JavaScript 做一些很酷的事情。window 对象的其他一些方法包括 alert()、confirm() 等。
记住！默认情况下，JavaScript 仅在浏览器内运行。因此，浏览器是 JavaScript 代码的默认运行时环境。Node.js
使 JavaScript 在浏览器外部运行（这使其成为 JavaScript 的运行时环境）。

由于fetch属于浏览器环境一部分的窗口对象，因此 fetch 无法在 Node.js 环境中工作，因为它没有可供操作的浏览器窗口。

我能做些什么呢？

您可以使用基于 Node.js 的 http 客户端库，例如axiossuperagent、node-fetch、isomorphic-unfetch 等。Axios
可以在浏览器和 Node.js 环境中运行。
这样，您的 Node.js 应用现在就可以发出 http 请求了。

等等！什么？所以你的意思是 Node.js 没有 http 模块或者其他东西来处理 http 请求？

Node.js 确实有处理 http 请求的http模块https，但它们相当底层，你必须分块接收响应并跟踪其完成时间。此外，你还必须手动将数据解析为 JSON。
最后但同样重要的是，它们不具备 Promises 的优点。

方便的请求方法别名

另一个优势是 附带了便捷的 http 请求方法（get、post 等）别名axios。
就像在用户搜索中一样，我axios.get(...)也使用了 hasaxios.post(...)和其他方法。
如果我想使用 执行 post 请求fetch，我需要执行以下操作：

// Using fetch
async function createUser() {
  const response = await fetch('https://httpbin.org/post', {
    method: 'POST',
    body: JSON.stringify({ name: 'John', email: 'john@mail.com' })
  });
}

但有了axios，我会这样做：

// Using axios
async function createUser() {
  const response = await axios.post('https://httpbin.org/post', { name: 'John', email: 'john@mail.com' });
}

Axios 允许您拦截请求/响应并取消请求

Axios 让您可以轻松地在请求和响应之间进行拦截。
这有点高级，但简单来说，您可以在响应到达目的地之前进行拦截并执行某些操作（例如，如果请求返回错误，您可以立即重定向或根据错误设置状态）。
随着时间的推移，您将了解用例并知道何时应用它们。了解更多。

最后，axios提供了一个简单的 API，允许您取消请求。
现代浏览器已经开始实现一项实验性功能，允许您中止fetch请求。截至本文撰写时，该技术仍处于实验阶段。

概括

Axios 为我们提供了一个更简洁的 API，用于在浏览器和基于 Node.js 的应用程序中处理 http 请求。您不能axios在基于浏览器的应用程序中直接使用任何第三方库，但我们发现，axios对于基于 Node.js 的应用程序，您需要一个像 这样的第三方库（或您喜欢的任何其他库）。
如果您细心观察，就会发现根据 ECMAScript 规范，fetch()和其他window方法alert()并不属于 JavaScript 语言。它们只是浏览器提供和实现的一堆插件。

我不相信你！！这听起来不对。

是的，不相信也没关系，因为我们alert()在学习 Javascript 的时候都学过 et al。

好吧，我为你准备了一些练习：

• 好吧，如果fetch它是 JavaScript 的一部分，为什么你不能在你的 Node.js 应用中使用它呢？试试看。
• 尝试一下：alert("Hello World")在任何 Node.js 应用程序中。

由于本文不是关于 Javascript 如何工作的，因此我们不会深入讨论该问题。

当你开始在应用程序中使用此库时，你还会发现其他优势。你可以阅读axios doc文档了解更多信息。

希望这篇文章对您有所帮助。
感谢您的阅读。祝
一切顺利