如何在 React 中以优化和可扩展的方式使用 Axios

我们可以看到如何在 React 应用程序中以优化和可扩展的方式使用Axios 。

在构建基于 API 的 React 应用时，HTTP 客户端是需要添加到架构中的核心服务。React 有许多 HTTP 客户端库。在选择哪个库时，Axios 可能是大多数开发者的首选。

Axios 是一个具有众多优势功能的 HTTP 客户端库。它可在浏览器和Node.js中使用。在本文中，我们将了解如何以可扩展且优化的方式利用 Axios 的所有高级功能。

Axios实例

对于大型应用来说，创建 Axios 实例尤为重要，因为所有基础配置都集中在一个文件中。基础配置的更改可以轻松地在一个文件中完成，并且会反映到使用 Axios 实例的任何地方。查看以下代码片段

	import axios from 'axios';

	const axiosClient = axios.create();

	axiosClient.defaults.baseURL = 'https://example.com/api/v1';

	axiosClient.defaults.headers = {
	'Content-Type': 'application/json',
	Accept: 'application/json'
	};

	//All request will wait 2 seconds before timeout
	axiosClient.defaults.timeout = 2000;

	axiosClient.defaults.withCredentials = true;

view raw .jsx hosted with ❤ by GitHub

基于以上代码，我们使用默认配置配置了所有基本设置，这些默认配置将应用于每个使用 axiosClient 实例的请求，如下面的请求所示。

我们可以在基本配置文件中对 Axios HTTP 动词（如、、和）进行分组GET，如下POST所示。DELETEPATCH

现在我们可以在需要发出 API 请求的任何地方直接导入自定义函数，如下面的代码所示。

Axios 的超时选项允许设置请求超时时间（以毫秒为单位）。在 Axios 中配置超时时间非常简单。正如我们之前所见，它可以在基础配置中定义。

timeout: 2000 // Request will be timeout after 2 seconds.

使用请求拦截，您可以在发送请求之前写入或执行操作。查看下面的代码片段。

contentType这里我们在请求之前添加了标头。请求拦截器默认是异步的，这可能会导致 Axios 请求执行出现一些延迟。为了避免这种情况，我们使用了synchronous: true。

使用请求拦截，您可以在响应到达之前写入或执行then。响应拦截器可用于在令牌过期（401 状态）时注销用户，或者您可以刷新令牌并再次发出失败的请求，以使用户停留在同一页面上，从而获得良好的用户体验。

您可以使用选项轻松跟踪 Axios 中的上传进度onUploadProgress。该选项onUploadProgress允许处理上传的进度事件。这可用于向用户实时显示上传百分比，以告知他们上传正在进行中。查看以下代码。

Axios 是 React 及其社区的一个很棒的 HTTP 客户端包。希望本文对您有所帮助。感谢您的阅读。

想要了解更多？欢迎关注Twitter。