在 JavaScript 中使用 Axios 对 API 进行 GET 调用

Axios 是一个基于 promise 的 HTTP 库，可以在浏览器和 Node.js 中使用。它提供了一个简单易用的 API，可用于处理在 Web 应用程序中发出的所有 HTTP 请求。

安装 Axios

在使用 Axios 之前，需要先安装它。可以通过 npm 命令进行安装：

npm install axios

发送 GET 请求

通过 Axios 发送 GET 请求非常简单。只需要通过调用 axios.get() 方法并传递 URL，就能向该 URL 发送 GET 请求。

以下示例演示了如何使用 Axios 向 API 发送 GET 请求：

const axios = require('axios');

// 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    // 处理响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

以上代码使用了 axios.get 方法向 https://api.example.com/data 发送了一个 GET 请求，并带有一个 promise，来处理该请求返回的响应。

参数传递

如果需要向 API 发送一些参数，可以在 URL 中进行传递。Axios 允许将参数作为查询字符串传递，可以通过 params 选项传递这些参数。

以下代码演示了如何使用 Axios 向 API 发送 GET 请求，同时还传递了一些查询参数：

const axios = require('axios');

// 发送 GET 请求，并传递查询参数
axios.get('https://api.example.com/data', {
    params: {
        limit: 10,
        offset: 0
    }
  })
  .then(response => {
    // 处理响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上述代码中，params 选项是一个对象，包含一些查询参数。Axios 会将这些查询参数附加到请求的 URL 中。

请求头

如果需要向 API 发送一些特定的请求头信息，可以通过 Axios 配置 headers 选项来实现。可以将 headers 选项设置为一个对象，其中包含需要的请求头信息。

以下示例演示了如何使用 Axios 向 API 发送 GET 请求，并同时发送一些特定请求头信息：

const axios = require('axios');

// 发送 GET 请求，并添加请求头
axios.get('https://api.example.com/data', {
    headers: {
        'Authorization': 'Bearer xxx',
        'Content-Type': 'application/json'
    }
  })
  .then(response => {
    // 处理响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上述代码中，headers 选项是一个对象，它包含了一些请求头信息，比如 Authorization 和 Content-Type。

处理响应

Axios 采用 Promise 链式操作处理请求和响应。使用 Promise，则可以在请求之后对响应进行处理。

以下示例演示了如何使用 Promise 处理 Axios 的 API 请求：

const axios = require('axios');

// 发送 GET 请求，并处理响应
axios.get('https://api.example.com/data')
  .then(response => {
    // 处理响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上述代码中，当 API 返回响应时，then() 回调函数会立即处理响应数据。

错误处理

在发送请求时，错误可能会发生在多个不同的阶段。Axios 具有一个错误处理机制，可以使用 catch() 方法捕捉错误。

以下示例演示了如何使用 catch() 方法来捕捉 Axios 发送的请求错误：

const axios = require('axios');

// 发送 GET 请求，并处理错误
axios.get('https://api.example.com/data')
  .then(response => {
    // 处理响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上述代码中，catch() 回调函数会处理任何发送请求时发生的错误。

结论

以上是使用 Axios 在 JavaScript 中发送 API 请求的基本用法。要发送其他 HTTP 请求（例如 POST、PUT、DELETE 等），请使用其他方法（例如 axios.post、axios.put、axios.delete 等）。Axios 也可以使用拦截器来拦截请求或响应，从而进行自定义处理。如果需要了解更多详细信息，请查看 Axios 官方文档。