Axios：使用GET和POST请求实战

Axios是一个流行的HTTP请求库，可以在JavaScript应用程序中轻松进行HTTP请求。在本文中，我们将使用Axios库来进行GET和POST请求，同时展示如何传递参数和处理响应数据。

首先，我们需要在项目中安装和引入Axios。您可以使用npm或yarn来安装Axios。在终端中，输入以下命令来安装Axios：

或者

然后，在JavaScript文件中引入Axios：

现在我们已经准备好开始GET和POST请求了。

发送GET请求时，我们需要指定请求URL，然后可以选择传递参数，例如查询参数。我们可以使用Axios的get()方法来发送GET请求。以下是一个示例，其中我们将使用NASA的API来获取有关“Curiosity”火星车的信息：

在上面的代码中，我们使用get()方法向NASA的API发送GET请求。我们传递了两个参数，一个是请求URL，另一个是包含查询参数的JavaScript对象。在这个例子中，我们使用params属性传递了两个查询参数：sol和api_key。sol参数是一个整数，表示火星车行驶的太阳日数。api_key参数是我们用于访问NASA API的演示API密钥。Axios将这些参数附加到URL的查询字符串中。

当我们接收到响应时，我们使用then()方法处理响应数据。在这个例子中，我们将响应数据打印到控制台上。

如果请求发生错误，我们可以使用catch()方法处理错误。在这个例子中，我们将错误打印到控制台上。

发送POST请求时，我们需要指定请求URL，然后可以选择传递数据作为请求正文。我们可以使用Axios的post()方法来发送POST请求。以下是一个示例，其中我们将使用一个自定义API来添加新的用户：

在上面的代码中，我们使用post()方法向自定义API发送POST请求。我们传递了两个参数，一个是请求URL，另一个是包含要提交的数据的JavaScript对象。在这个例子中，我们向API提交了两个用户属性：name和email。Axios会将这些数据作为请求正文发送到API。

当我们接收到响应时，我们使用then()方法处理响应数据。在这个例子中，我们将响应数据打印到控制台上。

如果请求发生错误，我们可以使用catch()方法处理错误。在这个例子中，我们将错误打印到控制台上。

有时，我们需要向服务器发送自定义请求头。例如，在我们的API需要身份验证时，我们需要将令牌作为请求头的一部分发送。在Axios中，我们可以使用headers属性向请求中添加任何标头。以下是一个示例，其中我们将向API发送一个带有身份验证令牌的POST请求：

在上面的代码中，我们使用headers属性向请求中添加了一个名为“Authorization”的标头。该标头的值是我们的身份验证令牌，它以“Bearer”作为前缀。Axios将这个标头添加到请求中，并发送给API。

当我们接收到响应时，我们可以使用then()方法处理响应数据。在Axios中，响应数据是Axios响应对象的data属性。如果API返回JSON数据，则Axios会自动将其解析为JavaScript对象或数组。

以下是一个示例，其中我们将使用NASA的API来获取“Curiosity”火星车的照片，然后显示其中的一张图片：

在上面的代码中，我们使用then()方法处理响应数据。我们从响应对象的data属性中提取了照片数组。我们选择数组中的第一个照片，并使用它的img_src属性创建了一个新的图像元素。最后，我们将图像元素添加到文档的主体中。

如果API返回的是XML或HTML等非JSON格式的数据，则需要手动解析响应数据。在这种情况下，Axios响应对象的data属性包含原始响应数据，您可以根据需要使用适当的库进行解析。

如果请求失败，Axios将返回一个错误对象。在Axios中，可以使用catch()方法来处理请求错误。以下是一个示例，其中我们向一个不存在的API发送一个GET请求：

在上面的代码中，我们使用catch()方法处理错误。如果请求失败，Axios将返回一个错误对象，并将其传递给catch()方法。在这个例子中，我们将错误打印到控制台上。

在错误对象中，我们可以访问以下属性：

在处理错误时，我们可以使用这些属性来调试问题或采取适当的措施。例如，我们可以检查响应对象中的状态码来确定服务器返回了什么样的响应。我们还可以检查响应数据中的错误消息，并基于这些消息采取适当的措施。

有时，我们需要同时向多个API发送请求。在Axios中，我们可以使用axios.all()方法来并行发送多个请求。以下是一个示例，其中我们将向两个不同的API发送GET请求：

在上面的代码中，我们使用axios.all()方法同时发送了两个请求。该方法接受一个Axios请求对象数组作为参数，并返回一个新的Axios Promise对象。当所有请求都成功返回时，Promise对象将被解析为包含响应对象数组的数组。在这个例子中，我们打印了响应数组中的数据到控制台上。

如果其中一个请求失败，Promise对象将被拒绝，并返回一个错误对象。在这种情况下，我们可以使用catch()方法来处理错误。

Axios是一个强大的JavaScript库，它简化了向API发送HTTP请求的过程。使用Axios，我们可以轻松地发送各种类型的请求，包括GET，POST，PUT和DELETE。Axios还提供了一些有用的功能，例如请求拦截器，响应拦截器，错误处理和并行请求。

在本文中，我们学习了如何使用Axios向API发送GET和POST请求，并如何处理响应数据和错误。我们还学习了如何向请求中添加自定义标头，以及如何同时发送多个请求。

Axios是现代Web开发中不可或缺的工具之一。学会使用Axios将有助于您开发更快，更可靠和更高效的应用程序。在开始使用Axios之前，请确保熟悉RESTful API的基本原则，包括HTTP请求方法，请求URL，请求标头和请求主体的作用。

以上是关于使用Axios发送GET和POST请求的介绍和实例，希望对你有所帮助。