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. C# 应用 - 使用 WebClient 发起 Http 请求

    1. 需要的库类 \Reference Assemblies\Microsoft\Framework\.NETFramework\v4.7.2\System.dll System.Net.WebCli ...

  2. 翻译:《实用的Python编程》05_02_Classes_encapsulation

    目录 | 上一节 (5.1 再谈字典) | 下一节 (6 生成器) 5.2 类和封装 创建类时,通常会尝试将类的内部细节进行封装.本节介绍 Python 编程中有关封装的习惯用法(包括私有变量和私有属 ...

  3. MySQL入门(1)——基础操作

    MySQL入门(1)--基础操作 创建数据库 创建基本数据库: create database db_admin; 创建基本数据库(等价于CREATE DATABASE): create schema ...

  4. 【wp】2021V&NCTF

    前几天打完的V&NCTF公开赛,做题的时候没记过程,这是复现wp. 最后排名Top 18,三道RE+两道杂项(wp没啥可放的hhh)+一道web,感觉re题目还是挺好的,难度适中点赞,尤其pc ...

  5. Java中BO、DAO、DO、DTO、PO、POJO、VO的概念

    在程序开发中,经常会碰到各种专业术语,这里统一做一下解释,有遗漏或理解错误的恳请指正. BO(Business Object)业务对象 主要作用是把业务逻辑封装为一个对象,这个对象可以包括一个或多个其 ...

  6. TCP/IP协议的经典面试知识点总结

    前言 大家好啊,我是汤小圆. 今天给大家推荐的是,TCP/IP协议的经典面试知识点总结,希望对大家有帮助,谢谢. 简介 我们平时经常听到的TCP/IP协议,其实是一个协议族: 只不过因为TCP.IP是 ...

  7. ElasticSearch创建文档

    1. 新建文档 支持自动生成文档 ID 和指定文档 ID 两种方式 通过调用 "post/users/_doc" ,系统会自动生成 document id 使 用HTTP PUT ...

  8. 如何使用Excel发送邮件?

    假设你有一个Excel,其中列出了所有收件人的信息,如下所示: 如果需要向列表中的每个用户发送一封邮件,最好使用当前记录生成一个附件,并且格式如下: 姓名, 发送消息 你应该怎么办?一个一个拷贝发送? ...

  9. OO第二单元作业——魔鬼电梯

    简介 本单元作业分为三次 第一次作业:第一次作业要实现单部简单电梯,停靠所有楼层,无载客容量,性能分考量电梯运行时间. 第二次作业: 第二次作业实现多部电梯,电梯数量由初始化设定,每部电梯都停靠所有楼 ...

  10. 面试官:Java中线程是按什么顺序执行的?

    摘要:Java中多线程并发的执行顺序历来是面试中的重点,掌握Java中线程的执行顺序不仅能够在面试中让你脱颖而出,更能够让你在平时的工作中,迅速定位由于多线程并发问题导致的"诡异" ...