zoukankan      html  css  js  c++  java
  • 【axios】get/post请求params/data传参总结

    axios中get/post请求方式

    1. 前言

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

    2.1 分类

    image.png
    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进行修饰。

  • 相关阅读:
    LeetCode 1110. Delete Nodes And Return Forest
    LeetCode 473. Matchsticks to Square
    LeetCode 886. Possible Bipartition
    LeetCode 737. Sentence Similarity II
    LeetCode 734. Sentence Similarity
    LeetCode 491. Increasing Subsequences
    LeetCode 1020. Number of Enclaves
    LeetCode 531. Lonely Pixel I
    LeetCode 1091. Shortest Path in Binary Matrix
    LeetCode 590. N-ary Tree Postorder Traversal
  • 原文地址:https://www.cnblogs.com/somliy/p/13189485.html
Copyright © 2011-2022 走看看