在 Axios 中发送 POST 请求并携带参数通常有以下两种方式

文章目录

  • [一、 JSON 格式传递参数](#一、 JSON 格式传递参数)
  • [二、FormData 格式传递参数(包括文件上传)](#二、FormData 格式传递参数(包括文件上传))
  • 参考文档

一、 JSON 格式传递参数

  • 如果你的后端接口期待接收 JSON 格式的请求体,可以这样做:
  • 在这个例子中,data 对象会被转换成 JSON 并放在请求体(request body)中发送。
js 复制代码
import axios from 'axios';

const data = {
  username: 'user1',
  password: '123'
};

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

二、FormData 格式传递参数(包括文件上传)

  • 如果需要上传文件或者以表单形式提交数据,可以使用 FormData 对象:
  • 当使用 FormData 时,一般情况下不需要手动设置 Content-Type,因为 Axios 能够自动识别并设置正确的值。所以下面的 headers 也是可以省略的
js 复制代码
let formData = new FormData();
formData.append('username', 'user1');
formData.append('file', fileInputElement.files[0]);

axios.post('https://api.example.com/upload', formData, {
  headers: {'Content-Type': 'multipart/form-data' } // 不指定时axios会自动设置
})
.then((response) => {
  // 处理响应
})
.catch((error) => {
  // 处理错误
});

参考文档

相关推荐
apcipot_rain6 小时前
C++转Java日记(06)
java·开发语言
金銀銅鐵11 小时前
带您看懂字节码指令(一):一帧里有什么
java·后端·ai编程
nice_lcj52013 小时前
【从零理解 Spring AI · 14】RAG 的四个环节:加载、切分、向量化、检索
java·spring boot·embedding·向量数据库·rag·spring ai·ai应用开发
学长毕设14 小时前
基于springboot科创竞赛信息平台-附源码
java·spring boot·后端
聪明的笨猪猪15 小时前
Java 工程案例:AI 生成 @Async 异步线程池踩坑
java·经验分享·面试·ai编程
学长毕设15 小时前
基于SpringBoot公务员考试交流平台-附源码
java·spring boot·后端
SL_staff18 小时前
私有化低代码:面向强监管行业的可控数字化实践
java·低代码
三翼鸟数字化技术团队18 小时前
高性能存储引擎RocksDB:原理与Java生态实践
java
SL_staff18 小时前
JVS-APS有限产能建模的七个刚性支点:面向产线真实约束的技术实现解析
java·开源·全栈
特立独行的猫A19 小时前
少 3 个环节、少 1 次 ABI、少 3500 行代码:cj-tauri 与 Ionic/Capacitor 的鸿蒙桥接机制对比
java·后端·python