Axios 关键要点

• Axios 是一个流行的基于 Promise 的 HTTP 客户端，拥有易于使用的 API，可在浏览器和 Node.js 环境中使用。它为 JavaScript 开发者提供了一个多功能工具。
• Axios 与内置的 Fetch API 在几个方面有所不同，包括其对 HTTP 错误代码的处理、自动包含 Cookie 在请求中以及能够提供上传/下载进度更新。
• Axios 允许开发者转换输出或输入数据并添加拦截器，拦截器是在发出请求或收到响应时触发的函数。这些功能为处理数据和管理请求和响应提供了灵活性。
• 存在一个强大的第三方库生态系统来扩展 Axios 的功能。这些附加组件涵盖了从拦截器和测试适配器到日志记录器，增强了 Axios 在不同用例中的能力。

Axios 是一个广受欢迎的基于 Promise 的 HTTP 客户端，它具有易于使用的 API，并且可以在浏览器和 Node.js 环境中使用。发出 HTTP 请求以获取或保存数据是客户端 JavaScript 应用程序最常见的任务之一。长期以来，第三方库（尤其是 jQuery）一直是与冗长的浏览器 API 交互并消除跨浏览器差异的流行方法。随着人们逐渐放弃 jQuery 而转向改进的原生 DOM API 或 React 和 Vue.js 等前端 UI 库，仅仅为了其 $.ajax 功能而包含它就变得没有意义了。让我们看看如何在代码中开始使用 Axios，并了解一些使其在 JavaScript 开发人员中广受欢迎的功能。

Axios 与 Fetch 的比较

您可能已经知道，现代浏览器内置了较新的 Fetch API，那么为什么不直接使用它呢？两者之间存在一些差异，许多人认为这使得 Axios 更具优势。其中一个区别在于这两个库如何处理 HTTP 错误代码。使用 Fetch 时，如果服务器返回 4xx 或 5xx 系列错误，则您的 catch() 回调不会被触发，开发人员需要检查响应状态代码以确定请求是否成功。另一方面，如果返回这些状态代码之一，Axios 将拒绝请求 Promise。另一个经常让刚接触 API 的开发者感到困惑的小区别是，Fetch 在发出请求时不会自动将 Cookie 发送回服务器。必须明确传递一个选项才能包含它们。Axios 在这里为您提供支持。对于某些人来说，最终可能成为障碍的一个区别是上传/下载的进度更新。由于 Axios 建立在较旧的 XHR API 之上，因此您可以注册 onUploadProgress 和 onDownloadProgress 回调函数，以便在应用程序的 UI 中显示完成百分比。目前，Fetch 不支持此功能。最后，Axios 可以在浏览器和 Node.js 中使用。这有助于在浏览器和后端之间共享 JavaScript 代码，或执行前端应用程序的服务器端渲染。注意：Node 有 Fetch API 的版本可用，但在我看来，Axios 提供的其他功能使其更具优势。

安装

正如您可能预期的那样，安装 Axios 最常见的方法是通过 npm 包管理器：

npm i axios

并在需要的地方将其包含在您的代码中：

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

如果您没有使用某种模块捆绑器（例如 webpack），那么您可以始终以传统方式从 CDN 中提取库：

浏览器支持

Axios 在所有现代 Web 浏览器和 Internet Explorer 8 中均可运行。

发出请求

与 jQuery 的 $.ajax 函数类似，您可以通过将选项对象传递给 Axios 来发出任何类型的 HTTP 请求：

axios({
  method: 'post',
  url: '/login',
  data: {
    user: 'brunos',
    lastName: 'ilovenodejs'
  }
});

在这里，我们告诉 Axios 我们想要使用哪种 HTTP 方法（例如 GET/POST/DELETE 等）以及应该向哪个 URL 发出请求。我们还提供了一些数据，这些数据将以简单的键/值对 JavaScript 对象的形式与请求一起发送。默认情况下，Axios 将将其序列化为 JSON 并将其作为请求正文发送。

请求选项

发出请求时，您可以传递许多其他选项，但以下是一些最常见的选项：

• baseUrl：如果您指定了一个基本 URL，它将附加到您使用的任何相对 URL。
• headers：要作为标头发送的键/值对对象。
• params：将被序列化并作为查询字符串附加到 URL 的键/值对对象。
• responseType：如果您期望的响应格式不是 JSON，您可以将此属性设置为 arraybuffer、blob、document、text 或 stream。
• auth：传递包含用户名和密码字段的对象将使用这些凭据对请求进行 HTTP 基本身份验证。

方便方法

与 jQuery 一样，还有一些快捷方法可以执行不同类型的请求。get、delete、head 和 options 方法都接受两个参数：一个 URL 和一个可选的配置对象。

axios.get('/products/5');

post、put 和 patch 方法将数据对象作为它们的第二个参数，并将可选的配置对象作为第三个参数：

axios.post(
  '/products',
  { name: 'Waffle Iron', price: 21.50 },
  { options }
);

接收响应

发出请求后，Axios 返回一个 Promise，该 Promise 将解析为响应对象或错误对象。

axios.get('/product/9')
  .then(response => console.log(response))
  .catch(error => console.log(error));

响应对象

如果请求成功，您的 then() 回调将收到一个响应对象，其中包含以下属性：

• data：服务器返回的有效负载。默认情况下，Axios 期望 JSON 并将其解析回 JavaScript 对象。
• status：服务器返回的 HTTP 代码。
• statusText：服务器返回的 HTTP 状态消息。
• headers：服务器发送回的所有标头。
• config：原始请求配置。
• request：（在浏览器中运行时）实际的 XMLHttpRequest 对象。

错误对象

如果请求出现问题，Promise 将被拒绝，并显示一个错误对象，其中至少包含以下属性：

• message：错误消息文本。
• response：上一节中描述的响应对象（如果已收到）。
• request：（在浏览器中运行时）实际的 XMLHttpRequest 对象。
• config：原始请求配置。

转换和拦截器

Axios 提供了一些受 Angular 的 $http 库启发的简洁功能。尽管它们看起来相似，但它们的用例略有不同。

转换

Axios 允许您提供函数来转换输出或输入数据，这些函数采用您可以发出请求时设置的两个配置选项的形式：transformRequest 和 transformResponse。这两个属性都是数组，允许您链接多个将传递数据的函数。任何传递给 transformRequest 的函数都将应用于 PUT、POST 和 PATCH 请求。它们接收请求数据和标头对象作为参数，并且必须返回修改后的数据对象。

const options = {
  transformRequest: [
    (data, headers) => {
      // 对数据进行一些操作
      return data;
    }
  ]
}

可以以相同的方式向 transformResponse 添加函数，但仅在使用响应数据且在将响应传递给任何链接的 then() 回调之前调用它们。那么我们可以将转换用于什么？一个潜在的用例是处理期望以特定格式（例如 XML 或甚至 CSV）接收数据的 API。您可以设置一对转换，以便将输出和输入数据转换为 API 需要的格式，并从该格式转换回来。值得注意的是，Axios 的默认 transformRequest 和 transformResponse 函数将数据转换为 JSON 并从 JSON 转换，并且指定您自己的转换将覆盖这些转换。

拦截器

虽然转换允许您修改输出和输入数据，但 Axios 还允许您添加称为拦截器的函数。与转换一样，这些函数也可以附加到发出请求时或收到响应时触发。

// 添加请求拦截器
axios.interceptors.request.use((config) => {
    // 在发送请求之前执行某些操作
    return config;
  }, (error) => {
    // 对请求错误执行某些操作
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use((response) => {
    // 对响应数据执行某些操作
    return response;
  }, (error) => {
    // 对响应错误执行某些操作
    return Promise.reject(error);
  });

正如您从上面的示例中可能注意到的那样，拦截器与转换有一些重要的区别。拦截器不是只接收数据或标头，而是接收完整的请求配置或响应对象。创建拦截器时，您还可以选择提供一个错误处理程序函数，允许您捕获任何错误并适当地处理它们。请求拦截器可用于执行诸如从本地存储检索令牌并与所有请求一起发送之类的操作，而响应拦截器可用于捕获 401 响应并将重定向到登录页面以进行授权。

第三方附加组件

作为一个流行的库，Axios 受益于扩展其功能的第三方库生态系统。从拦截器到测试适配器再到日志记录器，有很多可用的工具。以下是一些我认为您可能会发现有用的工具：

• mock-adapter：允许您轻松模拟请求以促进测试代码。
• cache-plugin：用于有选择地缓存 GET 请求的包装器。
• redux-axios-middleware：如果您是 Redux 用户，此中间件提供了一种简洁的方法来使用普通的旧操作调度 Ajax 请求。

Axios GitHub 存储库中提供了更多附加组件和扩展的列表。总而言之，Axios 有很多值得推荐的地方。它具有简单的 API，以及对以前使用过 jQuery 的任何人来说都很熟悉的实用快捷方法。它的流行以及各种第三方附加组件的可用性使其成为包含在您的应用程序中的可靠选择，无论是在前端、后端还是两者兼而有之。

Axios 常见问题解答 (FAQ)

Axios 和 Fetch API 之间的区别是什么？

Axios 和 Fetch API 都是流行的 HTTP 请求工具。但是，两者之间存在一些关键区别。Axios 是一个基于 Promise 的 HTTP 客户端，它可以在浏览器和 node.js 环境中工作。它提供了一个用于处理 XMLHttpRequests 和 node 的 HTTP 接口的单一 API。另一方面，Fetch API 提供了 Request 和 Response 对象的通用定义，它也是基于 Promise 的。但与 Axios 不同，Fetch API 不是基于 XMLHttpRequest 的，它是 JavaScript ES6 的内置模块。

如何使用 Axios 处理错误？

Axios 提供了一种强大的错误处理方法。当 Axios 请求期间发生错误时，它将被拒绝，并显示一个错误对象。错误对象包含有关错误原因的信息，例如错误消息、HTTP 状态代码以及请求和响应对象。您可以使用 try/catch 块或 Promise 的 catch 方法捕获此错误。

我可以在 React 中使用 Axios 吗？

是的，Axios 可用于 React。事实上，它是在 React 应用程序中发出 HTTP 请求的流行选择。您可以在 React 中使用 Axios 从 API 获取数据并在您的组件中显示它。React 中的 Axios 请求可以在 componentDidMount 或 useEffect 钩子中进行。

如何在 Axios 中取消请求？

Axios 提供了一种取消请求的机制。这可以使用 CancelToken.source 工厂方法来完成。当您想要取消请求时，只需调用源对象上的 cancel 方法即可。

如何使用 Axios 发出 POST 请求？

使用 Axios 发出 POST 请求很简单。您可以使用 Axios 实例的 post 方法并将 URL 和数据作为参数传递。数据应该是表示请求有效负载的 JavaScript 对象。

我可以在 Vue.js 中使用 Axios 吗？

是的，Axios 可用于 Vue.js。它是在 Vue.js 应用程序中发出 HTTP 请求的流行选择。您可以在 Vue.js 中使用 Axios 从 API 获取数据并在您的组件中显示它。

如何在 Axios 中设置默认标头？

Axios 允许您设置默认标头，这些标头将与每个请求一起发送。这可以使用 Axios 实例的 defaults 属性来完成。您可以将 defaults 对象的 headers 属性设置为表示标头的 JavaScript 对象。

我可以在 Node.js 环境中使用 Axios 吗？

是的，Axios 可用于 Node.js 环境。它提供了一个用于处理 XMLHttpRequests 和 node 的 HTTP 接口的单一 API。这使其成为在 JavaScript 中发出 HTTP 请求的多功能工具。

如何处理 Axios 中的响应？

使用 Axios 发出请求时，它会返回一个解析为响应对象的 Promise。此对象包含从服务器返回的数据、请求的状态、标头以及其他信息。您可以使用 Promise 的 then 方法处理此响应。

我可以使用 Axios 同时发出多个请求吗？

是的，Axios 允许您同时发出多个请求。这可以使用 Axios 的 all 方法来完成。您将 Axios 请求返回的 Promise 数组传递给 all 方法，它返回一个新的 Promise，当所有请求完成后，该 Promise 将解析。