axios post 请求类型和 SpringBoot 参数接收知识

背景

axios 是一个易用、简洁且高效的 http 库，在 Vue 开发中常用于数据传输，笔者今年开发是就用的这个库。axios 提交请求时， headers 中的 content-type 如果和后台接收方式不一致，就会产生错误，比如后台收到的参数是 null ，或者是前端 js 报错等。

本文就来总结一下 axios 提交 post 请求时，axios post 请求类型和 SpringBoot 参数接收方式的对应关系。

JSON 数据提交

如果需要直接将前端的 JSON 数据提交，可以用 application/json 类型。

axios 发送 post 请求时，默认的 request 头域中 Content-Type 是 application/json，此时后台 Controller 接收时必须使用 @RequestBody 注解接收，这适用于复杂 JSON 对象的传递，可以直接将前端的复杂对象转换为后台对象实例。

这种方式比较简单且好用，把页面操作的对象直接作为参数就可以：

this.$axios.post(submitUrl, targetData)

这里的 targetData 就是页面上的 JSON 对象，浏览器的头域类型为：

表单提交

表单提交时，请求数据类型为 application/x-www-form-urlencoded ，此时后台接收参数不能用 @RequestBody 注解。

提交表单数据有两种方式，一种是用 FormData 拼接表单数据，一类是用 Qs 序列化。

FormData 方式

如果需要使用常规表单方式提交数据，可以使用 FormData，它的本质就是转换为常规的页面表单，以 &key=value 的形式组装请求参数。

比如这个批量删除操作：

后台接收参数 ids 是一个数组：

使用 FormData 提交时，请求头域为：

Qs 方式

例如，这个添加一个分组信息的功能，分组信息是一个普通的 js 对象，使用表单方式提交时，前台引入：

import Qs from 'qs';

提交代码时使用 stringfy 对参数

后台用普通对象接收，不能使用注解：

启示录

本文总结了 post 请求参数发送的三种方式，笔者一直用的是第一种，但是由于项目开发过程中，不同模块的开发人员，后台接收请求参数的方式不同，也碰到过后面两种接收方式。索性就认真对比了一下，彻底搞明白算了。

技术也是欺生的，下点决心搞明白了，也没啥，毕竟表单提交也不是什么新东西！