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

  • 相关阅读:
    积少成多Flash(8) ActionScript 3.0 网页之获取参数,JavaScript与ActionScript之间的相互调用
    积少成多Flash(11) Flex 3.0 动画效果(effect)
    积少成多Flash(9) Flex 3.0 布局控件, 样式(css), 皮肤(skin)
    系出名门Android(8) 控件(View)之TextSwitcher, Gallery, ImageSwitcher, GridView, ListView, ExpandableList
    系出名门Android(9) 数据库支持(SQLite), 内容提供器(ContentProvider)
    积少成多 Flash(ActionScript 3.0 & Flex 3.0) 系列文章索引
    系出名门Android(5) 控件(View)之TextView, Button, ImageButton, ImageView, CheckBox, RadioButton, AnalogClock, DigitalClock
    系出名门Android(1) 在 Windows 下搭建 Android 开发环境,以及 Hello World 程序
    小程序webview组件 nothing
    Python3的bytes/str之别
  • 原文地址:https://www.cnblogs.com/somliy/p/13189485.html
Copyright © 2011-2022 走看看