• 【axios】get/post请求params/data传参总结


    axios中get/post请求方式

    1. 前言

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

    2.1 分类


    get请求中没有data传值方式

    2.2 get请求

    params

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

    1. // method
    2. const params = {
    3. id: ‘123456789‘,
    4. name: ‘张三‘
    5. }
    6. test(params)
    7. // api
    8. export function test (params) {
    9. return axios({
    10. url: url,
    11. method: ‘GET‘,
    12. params: params
    13. })
    14. }
    15. // 后台
    16. @GetMapping("/test")
    17. public Result test(Long id, String name) {
    18. return Res.ok();
    19. }

    使用Map接收,需要添加 RequestParam 注解

    1. // method
    2. const params = {
    3. id: ‘123456789‘,
    4. name: ‘张三‘
    5. }
    6. test(params)
    7. // api
    8. export function test (params) {
    9. return axios({
    10. url: url,
    11. method: ‘GET‘,
    12. params: params
    13. })
    14. }
    15. // 后台
    16. @GetMapping("/test")
    17. public Result test(@RequestParam Map<String, Object> map) {
    18. return Res.ok();
    19. }

    使用实体类接收

    1. // 实体类
    2. @Data
    3. public class TestEntity {
    4. Long id;
    5. String name;
    6. }
    7. // method
    8. const params = {
    9. id: ‘123456789‘,
    10. name: ‘张三‘
    11. }
    12. test(params)
    13. // api
    14. export function test (params) {
    15. return axios({
    16. url: url,
    17. method: ‘GET‘,
    18. params: params
    19. })
    20. }
    21. // 后台
    22. @GetMapping("/test")
    23. public Result test(TestEntity testEntity) {
    24. return Res.ok();
    25. }

    ps: get请求不允许传递List,需要使用qs插件或者配置axios,具体参考链接

    2.3 post请求

    2.3.1 params 与 get方式相同

    与get相似,基础类型接收,名字对应即可

    1. // method
    2. const params = {
    3. id: ‘123456789‘,
    4. name: ‘张三‘
    5. }
    6. test(params)
    7. // api
    8. export function test (params) {
    9. return axios({
    10. url: url,
    11. method: ‘POST‘,
    12. params: params
    13. })
    14. }
    15. // 后台
    16. @PostMapping("/test")
    17. public Result test(Long id, String name) {
    18. return Res.ok();
    19. }

    与get相似,使用map接收

    1. // method
    2. const params = {
    3. id: ‘123456789‘,
    4. name: ‘张三‘
    5. }
    6. test(params)
    7. // api
    8. export function test (params) {
    9. return axios({
    10. url: url,
    11. method: ‘POST‘,
    12. params: params
    13. })
    14. }
    15. // 后台
    16. @PostMapping("/test")
    17. public Result test(@RequestParam Map<String, Object> map) {
    18. return Res.ok();
    19. }

    与get相似,使用实体类接收

    1. // 实体类
    2. @Data
    3. public class TestEntity {
    4. Long id;
    5. String name;
    6. }
    7. // method
    8. const params = {
    9. id: ‘123456789‘,
    10. name: ‘张三‘
    11. }
    12. test(params)
    13. // api
    14. export function test (params) {
    15. return axios({
    16. url: url,
    17. method: ‘POST‘,
    18. params: params
    19. })
    20. }
    21. // 后台
    22. @PostMapping("/test")
    23. public Result test(TestEntity testEntity) {
    24. return Res.ok();
    25. }

    2.3.2 data

    使用实体类接收

    1. // 实体类
    2. @Data
    3. public class TestEntity {
    4. Long id;
    5. String name;
    6. }
    7. // method
    8. const params = {
    9. id: ‘123456789‘,
    10. name: ‘张三‘
    11. }
    12. test(params)
    13. // api
    14. export function test (params) {
    15. return axios({
    16. url: url,
    17. method: ‘POST‘,
    18. data: params
    19. })
    20. }
    21. @PostMapping("/test")
    22. public Result test(@RequestBody TestEntity testEntity) {
    23. return Res.ok();
    24. }

    4. 总结

    总体来说,只要使用?params?get与post请求基本是一样使用的,如果参数名与传递名称不一致,需要使用@RequestParam修饰,若使用Map接收参数,必须使用@RequestParam修饰。但是如果想传list类型的数据,需要使用单独的方法处理(参考链接)。
    若使用data传递参数,必须使用一个实体类接收参数,而且需要添加注解@RequestBody进行修饰。

    【axios】get/post请求params/data传参总结

     

  • 相关阅读:
    模板方法模式:封装不变步骤,引导扩展实现灵活多态的算法流程
    服务器购买后的五个小技巧
    Vue 源码解读(8)—— 编译器 之 解析(下)
    SOLIDWORKS® 2024 新功能 - SIMULATION
    暴力破解漏洞——密文爆破、Session 固定攻击 (未授权)、密文传输爆破、Cookie 欺骗漏洞
    快速入门:使用 .NET Aspire 组件实现缓存
    STM32中I2C与EEPROM字写读写实现(硬件方式)
    基于SpringBoot的体育馆场地赛事预约管理系统设计与实现(源码+lw+部署文档+讲解等)
    SpringBoot+SpringMVC+MybatisPlus
    洛谷P1607 Fair Shuttle G
  • 原文地址:https://blog.csdn.net/administratop/article/details/126068775