axios发送post请求带参数：从基础到实战避坑指南

1次阅读

共计 2079 个字符，预计需要花费 6 分钟才能阅读完成。

axios 是目前前端开发中最流行的 HTTP 客户端之一，它基于 Promise 实现，支持浏览器和 Node.js 环境。相比于原生的 fetch API，axios 提供了更简洁的 API 和更丰富的功能，如请求 / 响应拦截、自动转换 JSON 数据等。

post 请求是 HTTP 协议中用于向服务器提交数据的一种方法，通常用于创建资源或提交表单数据。与 get 请求不同，post 请求的数据是放在请求体 (body) 中发送的，而不是作为 URL 的一部分，这使得它更适合传输大量或敏感的数据。

在实际开发中，新手在使用 axios 发送 post 请求时经常会遇到以下问题：

参数传递方式选择不当，导致服务器无法正确解析
忘记设置或错误设置 Content-Type 头部
参数格式不正确，如 JSON 字符串未正确序列化
敏感数据直接暴露在 URL 中
文件上传时未正确使用 FormData

URL 参数方式是将参数直接附加在 URL 后面，适合传递少量简单数据。这种方式虽然简单，但不适合传递敏感或大量数据。

// 使用 URLSearchParams 构建查询字符串
const params = new URLSearchParams();
params.append('username', 'john');
params.append('age', '25');

axios.post('/api/user', null, {params: params}).then(response => {console.log(response.data);
}).catch(error => {console.error(error);
});

FormData 是专门用于表单数据提交的 API，特别适合文件上传或传统表单提交场景。

// 创建 FormData 对象并添加数据
const formData = new FormData();
formData.append('username', 'john');
formData.append('avatar', fileInput.files[0]); // 文件上传

// 注意：使用 FormData 时，axios 会自动设置 Content-Type 为 multipart/form-data
axios.post('/api/user', formData)
  .then(response => {console.log('上传成功', response.data);
  })
  .catch(error => {console.error('上传失败', error);
  });

JSON 是现代 Web API 最常用的数据交换格式，适合传输结构化数据。

// 直接传递 JavaScript 对象，axios 会自动序列化为 JSON
const user = {
  username: 'john',
  age: 25,
  email: 'john@example.com'
};

axios.post('/api/user', user, {
  headers: {'Content-Type': 'application/json' // 明确指定 Content-Type}
}).then(response => {console.log(response.data);
}).catch(error => {console.error(error);
});