axios post 传递参数的写法大全

Axios是一个流行的基于Promise的HTTP库，用于浏览器和Node.js环境。在发送POST请求并传递参数时，你可以使用多种方式，下面是一些常见的写法：

1. **简单参数**（JSON Body）:

   const params = { key: 'value' };
   axios.post('https://api.example.com/endpoint', params)
   .then(response => {
     // 处理响应
   })
   .catch(error => {
     // 处理错误
   });

2. **FormData对象** (适合上传文件):

   const formData = new FormData();
   formData.append('file', file); // 或者 formData.append('key', 'value');
   axios.post('https://api.example.com/upload', formData, {
     headers: {'Content-Type': 'multipart/form-data'}
   })
   .then(response => {
     // 处理响应
   })
   .catch(error => {
     // 处理错误
   });

3. **URLSearchParams**:
对于拼接在URL查询字符串中的参数，可以使用这个方法：

   const searchParams = new URLSearchParams();
   searchParams.set('param1', 'value1');
   axios.post('https://api.example.com/endpoint?' + searchParams.toString(), undefined, {
     params: searchParams,
   })
   .then(response => {
     // 处理响应
   })
   .catch(error => {
     // 处理错误
   });

4. **JSON.stringify()配合data选项** (适用于发送复杂数据结构):

   const data = { user: { name: 'John' } };
   axios.post('https://api.example.com/endpoint', JSON.stringify(data))
   .then(response => {
     // 处理响应
   })
   .catch(error => {
     // 处理错误
   });

注意这里要用到`Content-Type: application/json`头部。

5. **axios.request()工厂方法**:
更底层的方法，允许更精细的控制：

   const config = {
     method: 'post',
     url: 'https://api.example.com/endpoint',
     data: { key: 'value' },
     transformRequest: [function (data) {
       return JSON.stringify(data);
     }],
     headers: {'Content-Type': 'application/json'}
   };
   axios.request(config)
   .then(response => {
     // 处理响应
   })
   .catch(error => {
     // 处理错误
   });