【axios】get/post请求params/data传参总结

时间:2022-08-22 23:44:22

axios中get/post请求方式

1. 前言

最近突然发现post请求可以使用params方式传值,然后想总结一下其中的用法。

2.1 分类

【axios】get/post请求params/data传参总结

get请求中没有data传值方式

2.2 get请求

params

基础类型接收,名字对应即可

// method
const params = {
id: '123456789',
name: '张三'
}
test(params) // api
export function test (params) {
return axios({
url: url,
method: 'GET',
params: params
})
} // 后台
@GetMapping("/test")
public Result test(Long id, String name) {
return Res.ok();
}

使用Map接收,需要添加 RequestParam 注解

// method
const params = {
id: '123456789',
name: '张三'
}
test(params) // api
export function test (params) {
return axios({
url: url,
method: 'GET',
params: params
})
} // 后台
@GetMapping("/test")
public Result test(@RequestParam Map<String, Object> map) {
return Res.ok();
}

使用实体类接收

// 实体类
@Data
public class TestEntity {
Long id;
String name;
} // method
const params = {
id: '123456789',
name: '张三'
}
test(params) // api
export function test (params) {
return axios({
url: url,
method: 'GET',
params: params
})
} // 后台
@GetMapping("/test")
public Result test(TestEntity testEntity) {
return Res.ok();
}

ps: get请求不允许传递List,需要使用qs插件或者配置axios,具体参考链接

2.3 post请求

2.3.1 params 与 get方式相同

与get相似,基础类型接收,名字对应即可

// method
const params = {
id: '123456789',
name: '张三'
}
test(params) // api
export function test (params) {
return axios({
url: url,
method: 'POST',
params: params
})
} // 后台
@PostMapping("/test")
public Result test(Long id, String name) {
return Res.ok();
}

与get相似,使用map接收

// method
const params = {
id: '123456789',
name: '张三'
}
test(params) // api
export function test (params) {
return axios({
url: url,
method: 'POST',
params: params
})
} // 后台
@PostMapping("/test")
public Result test(@RequestParam Map<String, Object> map) {
return Res.ok();
}

与get相似,使用实体类接收

// 实体类
@Data
public class TestEntity {
Long id;
String name;
} // method
const params = {
id: '123456789',
name: '张三'
}
test(params) // api
export function test (params) {
return axios({
url: url,
method: 'POST',
params: params
})
} // 后台
@PostMapping("/test")
public Result test(TestEntity testEntity) {
return Res.ok();
}

2.3.2 data

使用实体类接收

// 实体类
@Data
public class TestEntity {
Long id;
String name;
} // method
const params = {
id: '123456789',
name: '张三'
}
test(params) // api
export function test (params) {
return axios({
url: url,
method: 'POST',
data: params
})
} @PostMapping("/test")
public Result test(@RequestBody TestEntity testEntity) {
return Res.ok();
}

4. 总结

总体来说,只要使用 params get与post请求基本是一样使用的,如果参数名与传递名称不一致,需要使用@RequestParam修饰,若使用Map接收参数,必须使用@RequestParam修饰。但是如果想传list类型的数据,需要使用单独的方法处理(参考链接)。
若使用data传递参数,必须使用一个实体类接收参数,而且需要添加注解@RequestBody进行修饰。

【axios】get/post请求params/data传参总结的更多相关文章

  1. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  2. vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  3. ajax的data传参的两种方式

    ajax的data传参的两种方式 本文为转载. 1.[javascript] view plain copy /** * 订单取消 * @return {Boolean} 处理是否成功 */ func ...

  4. jmeter运行脚本后,请求偶发性的传参错误

    问题现象:jmeter写好脚本后,请求偶发性的传参错误 排查过程:1.结合报错返回值,看是不是线程并发引起: 2.排除线程并发引起后,看看是不是取值策略:如果是参数化,看看是不是每次迭代,每次都取唯一 ...

  5. angularjs 请求数据转换为Form Data传参

    在angularjs中配置好服务,有时传参会导致后台借不到值或者后台直接报错: 这就与后台框架有关,如果后台是以public ModelAndView接收接口传过来的参数,这种情况,前台传参的形式比较 ...

  6. axios post 踩坑之 post传参

    今天在项目(vue2.0)使用axios进行post请求的时候,使用官方文档的格式传递给后台的数据是一整个json对象,参数已经传递出去了,但是后台获取不到,() 解决方法 利用aixos结合qs来解 ...

  7. jmeter post请求在终端传参,并且指定请求参数文件

    命令:jmeter -n -t   jmeter_1.jmx   -l   report/report30.jtl    -Jnum=3000 -e -o   webresult/3000result ...

  8. RestTemplate post请求使用map传参 Controller 接收不到值的解决方案 postForObject方法源码解析&period;md

    结论 post方法中如果使用map传参,需要使用MultiValueMap来传递 RestTemplate 的 postForObject 方法有四个参数 String url => 顾名思义 ...

  9. get请求中url传参中文乱码问题

    在项目中经常会遇到中文传参数,在后台接收到乱码问题.那么在遇到这种情况下我们应该怎么进行处理让我们传到后台接收到的参数不是乱码是我们想要接收的到的,下面就是我的一些认识和理解. 一:get请求url中 ...

随机推荐

  1. py-faster-rcnn &plus;cudnn V5

    转载自http://blog.csdn.net/u010733679/article/details/52221404,经过实际操作,采用了第二种手动替换代码文件.修改个别函数名的方式,成功编译. - ...

  2. 收集的一些jQuery (我平常用的少的,但确实挺有效果的)

    禁用Jquery(动画)效果 jQuery.fx.off = true; 使用自己的 Bullets(这个有一丁点儿的小技巧) //这里是js代码 也就是给每个ul添加一个类名 然后给ul的子li前面 ...

  3. socket设置为非阻塞方式&lpar;windows和linux&rpar;

    Windows用以下方法将socket设置为非阻塞方式 : unsigned long ul=1; SOCKET s=socket(AF_INET,SOCK_STREAM,0); int ret=io ...

  4. php查询ip地址来源归属地的脚本

    <?php header('Content-Type:text/html;charset=utf-8'); if($_GET['sub']){ $ip = $_GET['ip']; $msg = ...

  5. PHP自学2——将用户提交表单存储到外部普通文件中

    在上一节中我们已经实现了将用户的订单信息提交到服务器端,然后服务器端将提交信息返回并显示到页面上.这一节将把上一节用户的订单信息保存到外部的普通文件中(即.txt文本文件中). 本节代码将用户提交的订 ...

  6. 【jQuery】 JQ和HTML以及JQ遍历元素

    JQ & HTML JQ作为一个JS库,很好地继承了JS和HTML互动的特点,并且还给出了包装得更好,操作层次更高的方法.和之前JQ的内容一样,方法的表现形式是$(selector).acti ...

  7. 精通CSS&plus;DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  8. lsb&lowbar;release -a 查询Linux系统版本

    LSB是Linux Standard Base的缩写,lsb_release命令用来显示LSB和特定版本的相关信息.如果使用该命令时不带参数,则默认加上-v参数.-v, --version显示版本信息 ...

  9. Informatica

    安装 相关专题 关于Bulk加载模式 性能调优 性能瓶颈 性能瓶颈概览 性能瓶颈之Target 性能瓶颈之Source 性能瓶颈之Mapping 性能瓶颈之Session 性能瓶颈之System 性能 ...

  10. 自学Aruba7&period;4-Aruba安全认证-MAC认证(web页面配置)

    点击返回:自学Aruba之路 自学Aruba7.4-Aruba安全认证-MAC认证(web页面配置) 由于前三节已经讲述了3种如何web页面配置安全认证,MAC认证就不过多讲解重复的步骤. 步骤1  ...