Axios 获取 - JavaScript

在JavaScript中，执行HTTP请求是一个非常基本的任务。然而，由于浏览器兼容性等问题，我们不得不编写许多冗长的代码以确保我们的代码在各种环境中运行。

然而，我们现在有一个非常好的解决方案 – Axios。Axios是一个基于Promise的HTTP客户端，可以帮助我们轻松地发送请求和处理响应。在这篇文章中，我将向你展示如何使用Axios进行网络请求，并处理响应结果。

安装Axios

在开始本教程之前，您需要确保您已经安装了Node.js和npm。如果您还没有它们，可以前往官网下载安装。

要安装Axios，您可以在终端窗口中运行以下命令：

npm install axios

以上是安装Axios的命令，您将在本地的npm库中安装Axios并可以使用它。接下来是如何使用Axios进行网络请求。

发送请求

要发送GET请求，我们可以简单地使用Axios.get方法，并将API端点的URL作为其参数传递：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })

我们调用 axios.get() 方法并传递API URL https://jsonplaceholder.typicode.com/posts，随后调用.then() 方法传递回调方法获得返回的结果，错误则使用.catch()方法获取错误信息。

你也可以使用axios.post()、axios.put()、axios.delete()、axios.patch()等方法发送其他类型的请求。其中，post方法需要提供第二个参数作为请求payload数据。

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在这个例子中，我们发送了一个POST请求，并指定数据。当Promise的状态为resolved时，打印响应结果。当状态为rejected时，打印错误信息。

处理响应结果

Axios的另一个强大功能是，它可以自动解析响应结果。通常，您可以将响应结果存储在变量中并访问其属性。

例如，以下代码将响应结果存储在变量response中，并访问其数据和状态码属性。

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
  })
  .catch(function (error) {
    console.log(error);
  });

您可以使用response.data属性访问响应数据。这是您将使用的最常见的属性。

要访问状态码，您可以使用response.status属性。这对于调试和处理错误非常有用。

此外，您还可以访问其他属性，例如响应头，响应体等。这些属性在Axios文档中有详细的说明。

处理错误

在Axios中，错误处理非常简单。只需在.then()之后制定一个.catch()回调，以捕获任何错误。例如：

axios.get('https://jsonplaceholder.typicode.com/posts/invalid-url')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在此示例中，我们将调用一个不存在的API端点。此时，Axios会将响应状态设置为404和将错误信息发送到.catch()回调中。

在错误处理程序中，我们可以访问包含错误消息的错误对象。

使用Axios时，错误处理应该是您处理异步操作时的标准流程。

到这里，我们已经了解了如何使用Axios进行HTTP操作。Axios凭借其易用性和灵活性，在JavaScript社区中很受欢迎，您可能希望将其用于您下一个项目中。

欢迎完善！