使用 Axios 在请求中发送有效负载

Axios 是一种基于 Promise 的现代化 HTTP 客户端，在 Node.js 和浏览器中都可以使用。它提供了方便的 API，用于处理 HTTP 请求和响应，包括发送和接收有效负载（payload），响应拦截、错误处理等功能。在这篇文章中，我们将介绍如何使用 Axios 在 HTTP 请求中发送有效负载。

安装 Axios

首先，我们需要安装 Axios。在使用 Axios 之前，我们需要先将其添加到项目中。可以使用 npm 或者 yarn 来安装 Axios。

npm install axios

或者

yarn add axios

发送 GET 请求

发送 GET 请求时，我们不需要在请求中包含有效负荷。只需要提供 URL 和可选的配置对象（例如 headers，params 等），Axios 就可以轻松地发送 GET 请求。

import axios from 'axios';

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

在上面的代码中，我们发送了一个 GET 请求到 GitHub API，获取了所有的用户信息。Axios 返回的结果是一个 Promise，我们可以使用 then() 来处理成功的响应，或者使用 catch() 来处理错误的响应。

发送 POST 请求

发送 POST 请求时，我们可以在请求中包含有效负荷。Axios 提供了多个选项来发送不同类型的有效负荷，例如字符串、数组、对象等。以下是几个例子：

发送字符串有效负荷

import axios from 'axios';

axios.post('https://example.com/api/data', 'hello world')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

在上面的代码中，我们发送了一个 POST 请求到 https://example.com/api/data，包含了一个简单的字符串有效负荷。

发送 JSON 对象有效负荷

import axios from 'axios';

const payload = {
  name: 'John Doe',
  age: 30,
  email: 'john.doe@example.com'
};

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

在上面的代码中，我们发送了一个 POST 请求到 https://example.com/api/data，包含了一个 JSON 对象有效负荷。

发送表单数据有效负荷（URL 编码）

import axios from 'axios';
import qs from 'qs';

const payload = {
  name: 'John Doe',
  age: 30,
  email: 'john.doe@example.com'
};

axios.post('https://example.com/api/data', qs.stringify(payload))
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

在上面的代码中，我们使用了 qs 库来将表单数据有效负荷 URL 编码，并使用 POST 请求发送。

处理响应

在使用 Axios 发送请求时，我们可以使用 then() 或者 catch() 方法来处理响应。在 then() 中，我们可以访问 response.data 属性来获取服务器返回的数据。如果出现错误，catch() 会捕获并处理错误信息。

以下是一个使用 then() 和 catch() 处理响应的例子。

import axios from 'axios';

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

结论

Axios 是一种简单易用的 HTTP 客户端，使发送 HTTP 请求变得容易而且更加简单。在这篇文章中，我们介绍了如何使用 Axios 发送 GET 和 POST 请求，并且学习了如何在请求中包含有效负荷。如果你想深入了解 Axios 的更多功能，请阅读 Axios 的官方文档。