表单数据形式参数详解与Axios发送请求正确姿势

2023-12-20 23:13:34

在 Axios 中轻松处理“表单数据”请求

在前端开发中，Axios 是一个非常流行的库，用于向服务器发送 HTTP 请求。在使用 Axios 时，经常会遇到需要发送“表单数据”的情况。表单数据通常包含用户输入的文本、数字或文件等信息。

什么是“表单数据”？

表单数据是指用户通过 HTML 表单提交的数据。它通常由键值对组成，其中键是输入字段的名称，值是输入的值。例如，一个带有两个输入字段的表单可能产生以下表单数据：

username=john
password=secret

在 Axios 中处理“表单数据”

在 Axios 中，我们需要使用 qs 库来处理表单数据。qs 库可以将 JavaScript 对象转换为查询字符串，即上面示例中的“username=john&password=secret”。

以下是将表单数据发送到服务器的步骤：

1. 安装 qs 库

使用 npm 或 yarn 安装 qs 库：

npm install qs

2. 导入 qs 库

在你的 JavaScript 代码中导入 qs 库：

import qs from 'qs';

3. 将数据转换为查询字符串

使用 qs.stringify() 方法将 JavaScript 对象转换为查询字符串：

const data = {
  username: 'john',
  password: 'secret'
};

const formData = qs.stringify(data);

4. 发送请求

使用 Axios 发送 POST 请求，并将查询字符串作为请求正文：

const response = await axios.post('/login', formData, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

处理响应

服务器响应将包含处理表单数据的结果。可以根据需要处理响应数据。

示例代码

以下是一个使用 Axios 发送表单数据的完整示例：

import qs from 'qs';

const data = {
  username: 'john',
  password: 'secret'
};

const formData = qs.stringify(data);

axios.post('/login', formData, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
.then((response) => {
  console.log(response.data);
})
.catch((error) => {
  console.error(error);
});