如何使用 Axios Get

在前端开发中，我们经常需要从服务器获取数据，Axios 是一个流行的用于发起 HTTP 请求的 JavaScript 库，在本文中，我们将介绍如何使用 Axios 的 GET 方法从服务器获取数据。

安装 Axios

在使用 Axios 之前，我们需要先安装它。你可以使用 npm 来安装它：

npm install axios

使用 Axios 发起 GET 请求

在我们开始使用 Axios 发起 GET 请求之前，让我们先了解一下 GET 请求的 URL 格式：

https://example.com/api/users

GET 请求通常用于获取特定资源的详细信息，例如像上面这个 URL 所示的用户列表。

使用 Axios 发起 GET 请求非常简单，以下是示例代码：

import axios from 'axios';

axios.get('https://example.com/api/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

Axios 的 GET 方法需要传入一个 URL 参数，并使用 Promise 封装请求。当请求成功时，Axios 会返回一个包含响应数据的 response 对象。我们可以通过 response.data 属性来访问这些数据。如果请求失败，Axios 会返回一个 error 对象。

使用查询参数

有时我们需要向服务器传递一些特定的参数，例如搜索关键字或分页信息等。这可以通过将这些参数作为查询参数添加到 URL 中来实现。

以下是一个添加查询参数的示例代码：

axios.get('https://example.com/api/users', {
  params: {
    page: 1,
    search: 'John',
  }
})

在上面的示例代码中，我们向 get() 方法传递一个对象作为第二个参数。这个对象中的 params 属性包含了要发送的查询参数。Axios 会自动将这些参数添加到 URL 中。

处理异常

Axios 提供了 catch() 方法来处理请求过程中发生的异常情况。以下是一个处理异常的示例代码：

axios.get('https://example.com/api/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

在上面的代码中，我们使用 catch() 方法来捕获 error 对象并处理它。我们可以通过 error.response 属性访问响应数据，或者通过 error.request 属性获取未发送的请求。最后，如果请求被取消或遇到网络错误，我们可以通过 error.message 属性获取错误信息。

总结

Axios 是一个流行的用于发起 HTTP 请求的 JavaScript 库，它提供了很多简单易用的方法来处理服务器通信，其中包括使用 GET 方法从服务器获取数据。我们可以使用 Axios 的 GET 方法来获取特定资源的详细信息，并可以添加查询参数和处理异常情况。