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. I - Tetrahedron HDU - 6814

    题目链接:https://vjudge.net/problem/HDU-6814 题意:在[1,n]中随机取三个数a,b,c作为直角四面体的三条直角棱,求顶点d到ABC面的高的倒数平方的数学期望. 思 ...

  2. IgniteMe -高校网络信息安全运维挑战赛

    1 int __cdecl main(int argc, const char **argv, const char **envp) 2 { 3 void *v3; // eax 4 int v4; ...

  3. 真会C#微信小程序的习题数据JSON文件下载链接

    完全没有精力去维护了,所以小程序停掉,集中精力做一件事. 链接: https://pan.baidu.com/s/1xL45KxDzR5oEQM6nwBA5rw 提取码: qv6n

  4. 从阿里云迁移分布式redis实例到华为云解决方案(详细)

    如果要换多数是经济因素啦- 一. 准备工作 先在华为云上买一台redis数据库,配置一定要注意多数要保持一致,至于4.0还是5.0倒问题不大亲测兼容 可用区要找现有ECS云主机中的相同的机器.记下:这 ...

  5. 别再面向 for 循环编程了,Spring 自带的观察者模式就很香!

    上一篇:JDK 自带的观察者模式就很香! 前段时间栈长给大家分享了什么是观察者模式,以及在 JDK 中如何实现观察者模式,现在都是 Spring 的天下了,今天就再分享下如何在 Spring/ Spr ...

  6. 【Azure Developer】Azure Graph SDK获取用户列表的问题: SDK中GraphServiceClient如何指向中国区的Endpoint:https://microsoftgraph.chinacloudapi.cn/v1.0

    问题描述 想通过Java SDK的方式来获取Azure 门户中所列举的用户.一直报错无法正常调用接口,错误信息与AAD登录认证相关,提示tenant not found. 想要实现的目的,通过代码方式 ...

  7. Element源码:项目初始化和webpack配置

    0x00.项目初始化 由于整个过程像素级 copy element,所以将不使用vue-cli初始化项目. 创建项目 新建一个空的文件夹,使用npm init 来初始化项目,并安装vue模块. 修改目 ...

  8. 承接上一篇,whale系统开篇,聊聊用户认证

    写在前面 上次老猫和大家说过想要开发一个系统,从简单的权限开始做起,有的网友表示还是挺支持的,但是有的网友嗤之以鼻,认为太简单了,不过也没事,简单归简单,主要的还是个人技术的一个整合和实战. 没错,系 ...

  9. 我与Git的那些破事(下)--分支模型

    在上篇文章中,我提到了Git的基本概念和一些本人实际项目中的总结.然而,最近读了Vincent Driessen写的一篇文章,觉得他总结的太好了,站在他肩膀上忍不住将自己的理解分享出来.Vincent ...

  10. Django 模型(Model)

    1. 模型简介 ORM 简介 使用 Mysql 数据库的环境配置 2. 定义模型 1)定义属性 2)字段类型 3)字段选项 4)关系 5)元选项 6)范例 3. 模型成员&管理器 1)类属性 ...