【Vue】Axios的get/post请求params/data传参总结

退居二线程序员

已于 2024-09-02 15:37:49 修改

阅读量2.5w

点赞数 21

分类专栏：历史代码笔记文章标签： vue.js javascript java

于 2020-12-24 14:39:50 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42688959/article/details/111627946

版权

历史代码笔记专栏收录该内容

38 篇文章

订阅专栏

本文总结了Vue中Axios库的GET和POST请求参数传递方式，包括get请求的params基础类型、Map、实体类接收，以及post请求的params、data接收，并指出GET请求传递List的注意事项和处理方法。对于POST请求，重点讲解了使用实体类和Map接收参数的规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

请求分类

在这里插入图片描述

一:Get请求

1.1: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，具体参考链接

二:Post请求

2.1 post-params

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

// 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();
}

使用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();
}

使用实体类接收

// 实体类
@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.2 post-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();
}