axios中get/post请求方式

1. 前言

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

2.1 分类



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方法源码解析.md

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

  9. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

随机推荐

  1. 微信小程序自定义Tabber,附详细源码

    目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...

  2. 不一样的软件们——GitHub 热点速览 v.21.10

    作者:HelloGitHub-小鱼干 创意,是程序员的一个身份代名词,一样的软件有不一样的玩法.比如,你可以像用 git 一样操作一个 SQL 数据库,dolt 就是这样的数据库.又比如,你可以只写文 ...

  3. 从RocketMQ的Broker源码层面验证一下这两个点

    本篇博客会从源码层面,验证在RocketMQ基础概念剖析,并分析一下Producer的底层源码中提到的结论,分别是: Broker在启动时,会将自己注册到所有的NameServer上 Broker在启 ...

  4. MySQL中where和on,where和having 的区别

    where和on的区别 用到连接查询时on会常用到,我们以左连接为例,来了解on的作用. on是在生成临时表使用的条件,不管on子句的条件是否为真,其都会返回左表的数据,如果条件为真则右表对应的数据也 ...

  5. A New Stone Game POJ - 1740

    题目链接:https://vjudge.net/problem/POJ-1740#author=0 题意:有n堆石子,每次你可以选一堆拿走任意数量的石子,而且你还可以选择从这一堆剩下石子中取任意数量石 ...

  6. ch1_6_1求解两种排序方法问题

    考拉有n个字符串字符串,任意两个字符串长度都是不同的.  考拉最近学习到有两种字符串的排序方法:   1.根据字符串的字典序排序.例如: "car" < "carr ...

  7. P1071 潜伏者(JAVA语言)

    //HashMap大法好 题目描述 RR国和SS国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动.历尽艰险后,潜伏于SS国的RR 国间谍小CC终于摸清了 SS 国军用密码的编码规则: 1. S ...

  8. 5、MyBatis教程之ResultMap

    6.ResultMap 要解决的问题:属性名和字段名不一致 1.查看之前的数据库的字段名 2.Java中的实体类设计 public class User { private int id; //id ...

  9. Amundsen在REA Group公司的应用实践

    REA Group是一家专门面向房地产与实业资产的跨国数字广告公司. 他们主要为消费者提供房地产购买.出售与租赁服务,同时发布各类房产新闻.装修技巧以及生活方式层面的内容.每一天,都有数百万消费者访问 ...

  10. Android Studio 之 在活动中使用 Toast

    •简介 Toast 是 Android 系统提供的一种非常好的提醒方式: 在程序中可以使用它将一些短小的信息通知给用户: 这些信息会在一段时间内自动消失,并且不会占用任何屏幕空间 •Toast.mak ...