axios的get、post请求params、data传参总结

文章原文https://www.jianshu.com/p/7a24b5eed364

1. 分类

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

• 不要用get来请求后台List类型的参数

3. post请求

• params：与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();
}

• params: 后台参数是map，与get相似(@RequestParam用来处理 Content-Type 为 application/x-www-form-urlencoded 编码的内容，Content-Type默认为该属性)

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

• params: 后台用实体类来接收

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

• params：后台参数是list时，要加@RequestBody 且用post访问，且前端用的是data
• 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类型的数据，需要使用post来请求，且添加@RequestBody注解。若使用data传递参数，必须使用一个实体类接收参数，而且需要添加注解@RequestBody进行修饰。