• Axios传值的几种方式

    1.  <body>
    2.  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    3.  </body>

    axios基本使用

    默认是get请求

    注意：get请求无请求体，可以有body,但是不建议带

    使用get方式进行无参请求

    1. <script>
    2.      axios({
    3.          url:'http://localhost:8080/get/getAll',
    4.          method:'get'
    5.      }).then(res=>{
    6.          console.log(res.data.data)
    7.      })
    8.  </script>
    9.  @GetMapping("/get/getAll")
    10.      public ResResult getAllUser(){
    11.          List<User> list = userService.list();
    12.          return ResResult.okResult(list);
    13.      }

     使用get方式请求，参数值直接放在路径中

     

    1. <script>
    2.      axios({
    3.          url:'http://localhost:8080/get/1',
    4.          method:'get'
    5.      }).then(res=>{
    6.          console.log(res.data.data)
    7.      })
    8.  </script>
    9.  后端接口
    10.  @GetMapping("/get/{id}")
    11.  public ResResult getUserById(@PathVariable("id") Long id){
    12.          User user = userService.getById(id);
    13.          return ResResult.okResult(user);
    14.  }

     使用get方式请求，参数拼接在路径中：方式① 

    1. <script>
    2.      axios({
    3.          url:'http://localhost:8080/get?id=1',
    4.          method:'get'
    5.      }).then(res=>{
    6.          console.log(res.data.data)
    7.      })
    8.  </script>
    9.  后端接口
    10.  @GetMapping("/get")
    11.      public ResResult getUserByIds(@RequestParam("id") Long id){
    12.          User user = userService.getById(id);
    13.          return ResResult.okResult(user);
    14.  }

     使用get方式请求，参数拼接在路径中：方式②

    1. <script>
    2.      axios({
    3.          url:'http://localhost:8080/get',
    4.          params:{
    5.              id:'2'
    6.          },
    7.          method:'get'
    8.      }).then(res=>{
    9.          console.log(res.data.data)
    10.      })
    11.  </script>
    12. 后端接口
    13. @GetMapping("/get")
    14.     public ResResult getUserByIds(@RequestParam("id") Long id){
    15.         User user = userService.getById(id);
    16.         return ResResult.okResult(user);
    17. }

    使用get方式请求，拼接多个参数在路径中：方式③ 

    1. <script>
    2.     axios({
    3.         url:'http://localhost:8080/get',
    4.         params:{
    5.             id:'2',
    6.             username:'swx'
    7.         },
    8.         method:'get'
    9.     }).then(res=>{
    10.         console.log(res.data.data)
    11.     })
    12. </script>
    13. 后端接口
    14. @GetMapping("/get")
    15.     public ResResult getUserByIds(@RequestParam("id") Long id,@RequestParam("username") String username){
    16.         LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
    17.         wrapper.eq(User::getUsername,username);
    18.         wrapper.eq(User::getId,id);
    19.         User user = userService.getOne(wrapper);
    20.         return ResResult.okResult(user);
    21.  }

     post请求接收json格式数据

    1. <script>
    2.     axios({
    3.         url:'http://localhost:8080/post/test',
    4.         data:{
    5.             'username':'swx'
    6.         },
    7.         method:'post'
    8.     }).then(res=>{
    9.         console.log(res.data.data)
    10.     })
    11. </script>
    12. 后端接口
    13. @PostMapping("/post/test")
    14.     public ResResult getUserByIdPostTest(@RequestBody User user){
    15.         LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
    16.         wrapper.eq(User::getUsername,user.getUsername());
    17.         User users = userService.getOne(wrapper);
    18.         return ResResult.okResult(users);
    19.     }

    3、请求简写方式&请求失败处理 

    get无参请求

    1. <script>
    2.     axios.get('http://localhost:8080/get/getAll').then(res=>{
    3.         console.log(res.data.data)
    4.     }).catch(err=>{
    5.         console.log('timeout')
    6.         console.log(err)
    7.     })
    8. </script>

    get有参请求,post方式不可以这样请求

    1. <script>
    2.     axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{
    3.         console.log(res.data.data)
    4.     }).catch(err=>{
    5.         console.log('timeout')
    6.         console.log(err)
    7.     })
    8. </script>

     post有参请求，以json格式请求

    1. <script>
    2.     axios.post('http://localhost:8080/post',"id=2&username=swx").then(res=>{
    3.         console.log(res.data.data)
    4.     }).catch(err=>{
    5.         console.log('timeout')
    6.         console.log(err)
    7.     })
    8. </script>
    9.  
    10.  
    11. 也可以一下方式，但是后端要加@RequestBody注解
    12. <script>
    13.     axios.post('http://localhost:8080/post/test',{username:'swx'}).then(res=>{
    14.         console.log(res.data.data)
    15.     }).catch(err=>{
    16.         console.log('timeout')
    17.         console.log(err)
    18.     })
    19. </script>

    axios并发请求

    1. <script>
    2.     axios.all([
    3.         axios.get('http://localhost:8080/get/getAll'),
    4.         axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
    5.     ]).then(res=>{
    6.         //返回的是数组，请求成功返回的数组
    7.         console.log(res[0].data.data),
    8.         console.log(res[1].data.data)
    9.     }).catch(err=>{
    10.         console.log(err)
    11.     })
    12. </script>
    13. 后端接口
    14. @GetMapping("/get/getAll")
    15.     public ResResult getAllUser(){
    16.         List<User> list = userService.list();
    17.         return ResResult.okResult(list);
    18.     }
    19.  
    20. @GetMapping("/get/get")
    21.     public ResResult getUserByIdt(@RequestParam("id") Long id){
    22.         User user = userService.getById(id);
    23.         return ResResult.okResult(user);
    24.     }

     方式2：使用spread方法处理返回的数组

    1. <script>
    2.     axios.all([
    3.         axios.get('http://localhost:8080/get/getAll'),
    4.         axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
    5.     ]).then(
    6.         //高端一些
    7.         axios.spread((res1,res2)=>{
    8.             console.log(res1.data.data),
    9.             console.log(res2.data.data)
    10.         })
    11.     ).catch(err=>{
    12.         console.log(err)
    13.     })
    14. </script>

    axios全局配置

    1. <script>
    2.     axios.defaults.baseURL='http://localhost:8080'; //全局配置属性
    3.     axios.defaults.timeout=5000; //设置超时时间
    4.  
    5.     //发送请求
    6.     axios.get('get/getAll').then(res=>{
    7.         console.log(res.data.data)
    8.     });
    9.  
    10.     axios.post('post/getAll').then(res=>{
    11.         console.log(res.data.data)
    12.     });
    13. </script>

    axios实例 

    1. <script>
    2.     //创建实例
    3.     let request = axios.create({
    4.         baseURL:'http://localhost:8080',
    5.         timeout:5000
    6.     });
    7.     //使用实例
    8.     request({
    9.         url:'get/getAll'
    10.     }).then(res=>{
    11.         console.log(res.data.data)
    12.     });
    13.  
    14.     request({
    15.         url:'post/getAll',
    16.         method:'post'
    17.     }).then(res=>{
    18.         console.log(res.data.data)
    19.     })
    20. </script>

    Axios各种参数携带方式详解 - 知乎 (zhihu.com)

  • 相关阅读:
    Sharding Sphere基于复合分片键分表实战
    基于 Transformation-Equivariant 的自动驾驶 3D 目标检测
    Redis集群模式
    SpringCloud 07 Ribbon实现负载均衡
    通付盾Web3专题 | KYT/AML：Web3合规展业的必要条件
    vue 使用openlayers加载图片,并实现图片上标点,点击弹窗
    lammps技巧：Out of range atoms - cannot compute PPPM原因分析及解决办法
    Tomcat学习
    力扣题解7.27
    产品经理常用工具汇总
  • 原文地址：https://blog.csdn.net/pachupingminku/article/details/134492531