您知道如何使用这些有用的 Axios 功能吗？

介绍

最近在练习 Vuejs 的时候，我做了一个经典的注册/登录单页应用。我已经对 Axios 有所了解，也学习了一些新功能，因为这个单页应用需要用到它们。然而，我查阅了一些相关文章，发现其中一些功能并没有得到很好的解释。于是，我写了这篇文章来解释其中的一些功能。

我不会解释 Axios 的工作原理，也不会深入介绍这些功能。我只是简单介绍一下，因为我在网上搜索到的关于它们的信息很少，甚至几乎没有。

向请求添加标头

如果你参与过需要用到这个功能的项目，你可能对此有所了解。但对于像我一样刚接触 Axios 的大多数人来说，这方面可能不太了解。有两种常用的方法可以向请求添加标头。一种方法是通过配置选项添加：

这里，我们向示例 API 端点发送一个 post 请求。我们传递一些数据以及第三个参数，即一个配置对象。这个配置对象包含一个headers对象。在这里，我们可以指定请求头并赋值。我们可以将这个配置对象传递给所需的请求。这是一种控制哪些请求可以获取这些请求头的好方法。

现在，如果我们想为所有请求添加一个通用标头或一组通用标头，该怎么办？我们可以在主 JavaScript 文件中的 axios 实例上设置全局标头。

我们可以添加所有类型的请求所共有的标头，也可以为特定类型的请求设置它们：

以下是在应用程序入口点写入的两个标头。如果您使用的是 Vue，则可能是main.js。也可能index.js取决于您文件的命名方式。我已经在主 axios 实例本身上定义了这些全局标头，因此它们将被添加到所有相应的请求中。

第一个是通用标头。这意味着它将被添加到所有请求中，无论它们是什么类型的请求。标头的名称为Authentication，其值已分配给它（您可以随意命名标头并赋予其适当的值）。

第二个标头的定义方式类似，但它仅适用于get请求。因此，该标头只会添加到get请求中。至此，您已将标头添加到 axios 请求中。Accepts

拦截器

拦截器是在每个离开应用程序的请求和到达应用程序的响应上执行的函数。我们使用 axios 实例上的use()方法来执行拦截器。对于请求拦截器，它接收请求配置作为参数。对于响应拦截器，参数将是返回的响应。

这是一个请求拦截器。它将拦截所有传出的请求并对其执行此函数。由于我们接收了配置对象作为参数，因此我们可以将其打印到控制台，在发送之前添加标头，或者执行一些条件操作。但是，我们必须返回配置对象，否则请求将被阻止。

我们也可以创建一个响应拦截器：

此拦截器将在应用程序收到的每个响应上执行。在这里，我们返回响应对象，因为不这样做会阻塞响应。

如果不需要某个拦截器，我们也可以使用条件语句将其移除。不过，移除拦截器需要知道它的 ID。这和获取 ID 并移除 的方法类似setInterval()。我们以移除请求拦截器为例：

我们通过向方法传入拦截器的 ID 来移除eject()它。当然，我是立即移除的，所以拦截器甚至不会被执行。不过，你可以把它放在条件语句中，或者基于其他事件移除它。移除响应拦截器的方法类似 - axios.interceptors.response.eject(resInterceptor)。

创建自定义 Axios 实例

对于大多数项目，您可能只会使用我们迄今为止一直在使用的全局 axios 实例。我们使用 导入它。虽然我们可以将其命名为axiosimport axios from 'axios';以外的任何名称，但它仍然是全局实例。在创建大型项目时，您可能会遇到一些问题。某些请求需要特定的配置和/或标头，而其他请求则需要一组不同的配置。

虽然您可以创建不同的配置对象并将它们与请求一起传递，但大型项目往往具有复杂的文件夹结构和模块化文件/组件。全局配置是一种选择（就像我们在主 Axios 实例上对标头所做的那样），但是如何针对不同的请求应用不同的配置呢？

答案是创建 Axios 的自定义实例。

此实例的工作方式与全局 Axios 实例完全相同。您还可以应用全局配置并向此自定义实例添加标头。它们将与全局实例（main.js文件中的实例）上的配置分开。然后，可以在需要的文件中导入此自定义实例。因此，我们可以将此自定义实例用于需要与全局实例上应用的配置不同的请求。

自定义实例可以在入口文件main.js（或index.js，取决于您命名它）中创建，但建议我们将其放在单独的文件中。

我们使用此create()方法创建自定义实例。它接受一个对象作为参数，用于定义所有配置。我们也可以在create()方法外部定义这些配置，例如我们之前定义的auth标头。使用此自定义实例的请求将包含此auth标头。尽管主 Axios 实例上的全局标头应该应用于所有请求，但由于这些请求使用的是自定义实例，因此它们不会应用于这些请求。另一方面，使用主 Axios 实例的请求将不包含此标头。

最后，我们还需要将其导出以便在其他文件中使用它。

总结

这三个功能是我在查阅一些相关文章时发现很少或根本没有相关信息的。虽然我对这些功能只做了一些简单的解释，但借助示例，您可以开始使用它们。

当然，这些并非是所有几乎没有指南的功能。可能还有很多其他功能。但是，我无法查找，因为我不了解它们。如果您知道其他需要详细指南的功能，请尽可能地介绍它们并解释它们的用法。

查看官方 Axios 文档以了解更多此类功能。

补充：对于任何刚接触 Axios 的开发者来说，如果想知道为什么使用configname 作为变量，它不是一个关键字，而是一个简单的对象名。你可以使用任何其他名称config，但我觉得使用 nameconfig作为变量更容易理解。