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

参考文档

相关推荐
zhanghaha13141 小时前
HTML系列教程:14_HTML 表单与输入框 <form>、<input> 零基础详解
java·前端·javascript
yxlalm7 小时前
Spring AI+RAG 01-项目背景与技术选型
java·人工智能·spring
程序员清风7 小时前
Java 后端高并发设计:线程池、限流、熔断与降级
java·数据库·oracle
Seoyoneh8 小时前
Agentic Workflow编排架构:云客服从“被动响应”迈向“主动执行”的技术实现
java·开发语言·架构
海南java第二人8 小时前
对外 API 如何保证幂等性?插入数据 / 上传表格场景全方案汇总
java·幂等性
tryxr8 小时前
Chat2Excel 文件服务模块上传文件功能开发
java·项目·oss·easyexcel·文件服务
Tangyuewei8 小时前
Java 写 Agent:模型只是组件
java·开发语言
彧azz9 小时前
Java学习语法篇:变量
java·学习
信誓旦旦的程序猿10 小时前
【量化系统从零构建 #04】存储设计:选型·建库·交易日历
java·人工智能·python·股票数据api·股票数据·股票数据api接口·股票api数据接口
yurenpai(27届找实习中)10 小时前
Java 10 的 var 为什么不能随便用?从订单汇总看懂类型推断与泛型陷阱
java·开发语言·java18