Axios传值的几种方式

欢乐狗  金牌会员 | 2024-6-15 01:59:25 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 804|帖子 804|积分 2412

  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>
  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.     }
  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; //设置超时时间
  5.     //发送请求
  6.     axios.get('get/getAll').then(res=>{
  7.         console.log(res.data.data)
  8.     });
  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.     });
  14.     request({
  15.         url:'post/getAll',
  16.         method:'post'
  17.     }).then(res=>{
  18.         console.log(res.data.data)
  19.     })
  20. </script>
复制代码
Axios各种参数携带方式详解 - 知乎 (zhihu.com)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

欢乐狗

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表