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

We can see how to use Axios in an optimized and scalable way in a React app.

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

When you are building an API-based React app, an HTTP client is the core service that needs to be added to the architecture. There are many HTTP client libraries for React. When deciding which to choose, Axios might be the first choice of most developers.

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

Axios is an HTTP client library with many advantage features. It can be used in browsers and Node.js. In this article, we will see how to utilize all the advanced Axios features in a scalable and optimized way.

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

Axios Instance

阿克塞斯实例

Creating an Axios instance is more important for a large-scale app, as all the base configuration lies in a single file. A change in the base config can be done easily in a single file and will be reflected anywhere the Axios instance is used. Check out the below code snippet

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

Based on the above code, we have configured all the base setup using default config, which will be applied to every request which uses the axiosClient instance, as shown in the below request.

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

Axios Verbs

阿克塞斯动词

We can group the Axios HTTP verbs, like GET, POST, DELETE, and PATCH, in the base config file, as below.

我们可以在基本配置文件中对Axios HTTP动词进行分组，比如GET,POST,DELETE, 和PATCH ，如下所示。

Now we can import the custom functions directly wherever we need to make an API request, as in the below code.

现在，我们可以在需要进行API请求的地方直接导入自定义函数，如下面的代码。

Timeout

超时

The Axios timeout option allows setting the request timeout in milliseconds. It is easy to configure timeout in Axios. It can be defined in the base config itself, as we saw before.

Axios超时选项允许以毫秒为单位设置请求超时。在Axios中配置超时是很容易的。就像我们之前看到的那样，它可以在基本配置本身中定义。

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