在 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) => {
  // 处理错误
});

参考文档

相关推荐
nanxun88619 小时前
记一次诡异的 Docker 容器"串包"故障排查
java
用户1563068103511 天前
Day01 | Java 基础(Java SE)
java
行者全栈架构师1 天前
Maven dependency:tree 的 8 个高级用法
java·后端
行者全栈架构师1 天前
IDEA 中 Maven 项目的 15 个红色报错快速解决方法
java·后端
令人头秃的代码0_01 天前
mac(m5)平台编译openjdk
java
唐青枫2 天前
Java JDBC 实战指南:从 Connection 到事务和连接池
java
一个做软件开发的牛马2 天前
MyBatis-Plus 从零实战:完整搭建可运行 Demo,BaseMapper 零 SQL、Wrapper 条件构造、分页插件与代码生成器详解
java·后端
用户3721574261352 天前
Java 处理 PDF 图片:提取 PDF 中的图片,并压缩 PDF 图片体积
java
用户3721574261352 天前
Java 打印 Word 文档:从基础打印到高级设置
java
用户3521802454753 天前
当 Prompt 学会"热更新":Spring Boot × Nacos3 AI 实战
java·spring boot·ai编程