React axios

概述

在ReactJS中，Axios是一个库，用于创建外部的HTTP请求。这是因为我们在React应用程序中可能有时需要从外部源获取数据。获取这些数据以便正常显示在网站上是相当困难的。因此，它有助于检索数据，并将其添加到状态中，以便在需要时为应用程序提供便利。

此外，React Axios非常易于修改且轻量级。它与其他许多现有框架配合也很好。使用Axios的主要目的是支持请求和响应拦截、将数据转换为JSON格式以及对其进行转换。它还可以帮助您默认防止XSRF伪造，同时请求跨站访问。

Axios是基于Promise的，这使得您可以利用JavaScript的async和await来编写更易读的异步代码。

它允许您使用JavaScript中现有的异步可读代码。借助内置的客户端跨站请求伪造保护功能，可以轻松地取消或拦截请求。

在这里，您将学习Axios与JSON和API集成以及在React中的其他应用程序的用法。

前提条件

在继续之前，让我们先考虑一些先决条件。

1. 熟悉yarn或node npm包管理器。
2. 已预装Create React App工具。
3. HTML/CSS和JavaScript(ES6)的基础知识。
4. 对命令行终端的基本理解。

打开系统的终端并键入如下所示的命令。

然后，您需要运行此命令来安装Axios。

此命令将在您的目录中安装axios。现在您可以执行与Axios库相关的某些活动。

使用Axios获取GET请求

要在项目中创建GET请求，请键入下面的命令。

这里的app.js是您的React代码的示例文件。之后，您可以像下面这样轻松地导入Axios的组件。

首先，您需要导入React和Axios，以便两者都可以在组件中使用。此外，您需要查看componentDidMount生命周期钩子并执行GET请求。

在上面的代码中，我们首先导入了React和Axios组件，以便将所有功能集成到我们的代码中。然后，您可以利用componentDidMount()函数进行生命周期管理，以创建GET请求。我们使用了axios.get URL，它将共同获取一个Promise来返回一个对象。在这个生成的请求中，您可能会得到已分配的数据。您还可以通过res.request和res.status参数获取状态码和请求日志。

使用Axios获取POST请求

获取HTTP请求非常简单，就像将对象配置传递给Axios函数一样。您可以轻松地使用给定的端点制作此类POST请求并触发事件。因此，要在Axios中执行HTTP POST请求，您需要调用axios.post()函数，然后传递两个参数，即端点服务的URI。

这些对象包含您要发送到服务器的相同属性。因此，要通过Axios创建简单的POST请求，该对象必须具有URL属性。如果不存在这样的方法，将继续使用GET请求值进行处理。请看一个简单的POST请求示例。

上面的Axios片段与JQuery的Ajax函数非常相似。此片段指示Axios使用对象值或键发送POST请求进行登录，Axios会将这段代码转换为JSON格式。稍后，这个JSON转换后的数据将被传递到请求正文中，然后进一步处理到您在React中包含的组件中。