Axios传值的几种方式

复制代码
 <body>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 </body>

axios基本使用

默认是get请求

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

使用get方式进行无参请求

复制代码
<script>
     axios({
         url:'http://localhost:8080/get/getAll',
         method:'get'
     }).then(res=>{
         console.log(res.data.data)
     })
 </script>
 @GetMapping("/get/getAll")
     public ResResult getAllUser(){
         List<User> list = userService.list();
         return ResResult.okResult(list);
     }

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

复制代码
<script>
     axios({
         url:'http://localhost:8080/get/1',
         method:'get'
     }).then(res=>{
         console.log(res.data.data)
     })
 </script>
 后端接口
 @GetMapping("/get/{id}")
 public ResResult getUserById(@PathVariable("id") Long id){
         User user = userService.getById(id);
         return ResResult.okResult(user);
 }

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

复制代码
<script>
     axios({
         url:'http://localhost:8080/get?id=1',
         method:'get'
     }).then(res=>{
         console.log(res.data.data)
     })
 </script>
 后端接口
 @GetMapping("/get")
     public ResResult getUserByIds(@RequestParam("id") Long id){
         User user = userService.getById(id);
         return ResResult.okResult(user);
 }

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

复制代码
<script>
     axios({
         url:'http://localhost:8080/get',
         params:{
             id:'2'
         },
         method:'get'
     }).then(res=>{
         console.log(res.data.data)
     })
 </script>
后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
}

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

复制代码
<script>
    axios({
        url:'http://localhost:8080/get',
        params:{
            id:'2',
            username:'swx'
        },
        method:'get'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>
后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id,@RequestParam("username") String username){
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,username);
        wrapper.eq(User::getId,id);
        User user = userService.getOne(wrapper);
        return ResResult.okResult(user);
 }

post请求接收json格式数据

复制代码
<script>
    axios({
        url:'http://localhost:8080/post/test',
        data:{
            'username':'swx'
        },
        method:'post'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>
后端接口
@PostMapping("/post/test")
    public ResResult getUserByIdPostTest(@RequestBody User user){
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,user.getUsername());
        User users = userService.getOne(wrapper);
        return ResResult.okResult(users);
    }

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

get无参请求

复制代码
<script>
    axios.get('http://localhost:8080/get/getAll').then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>

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

复制代码
<script>
    axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>

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

复制代码
<script>
    axios.post('http://localhost:8080/post',"id=2&username=swx").then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>


也可以一下方式,但是后端要加@RequestBody注解
<script>
    axios.post('http://localhost:8080/post/test',{username:'swx'}).then(res=>{
        console.log(res.data.data)
    }).catch(err=>{
        console.log('timeout')
        console.log(err)
    })
</script>

axios并发请求

复制代码
<script>
    axios.all([
        axios.get('http://localhost:8080/get/getAll'),
        axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
    ]).then(res=>{
        //返回的是数组,请求成功返回的数组
        console.log(res[0].data.data),
        console.log(res[1].data.data)
    }).catch(err=>{
        console.log(err)
    })
</script>
后端接口
@GetMapping("/get/getAll")
    public ResResult getAllUser(){
        List<User> list = userService.list();
        return ResResult.okResult(list);
    }

@GetMapping("/get/get")
    public ResResult getUserByIdt(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
    }

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

复制代码
<script>
    axios.all([
        axios.get('http://localhost:8080/get/getAll'),
        axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
    ]).then(
        //高端一些
        axios.spread((res1,res2)=>{
            console.log(res1.data.data),
            console.log(res2.data.data)
        })
    ).catch(err=>{
        console.log(err)
    })
</script>

axios全局配置

复制代码
<script>
    axios.defaults.baseURL='http://localhost:8080'; //全局配置属性
    axios.defaults.timeout=5000; //设置超时时间

    //发送请求
    axios.get('get/getAll').then(res=>{
        console.log(res.data.data)
    });

    axios.post('post/getAll').then(res=>{
        console.log(res.data.data)
    });
</script>

axios实例

复制代码
<script>
    //创建实例
    let request = axios.create({
        baseURL:'http://localhost:8080',
        timeout:5000
    });
    //使用实例
    request({
        url:'get/getAll'
    }).then(res=>{
        console.log(res.data.data)
    });

    request({
        url:'post/getAll',
        method:'post'
    }).then(res=>{
        console.log(res.data.data)
    })
</script>

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

相关推荐
R.X. NLOS6 分钟前
VS Code远程开发新方案:使用SFTP扩展解决Remote-SSH连接不稳定问题
运维·服务器·ssh·debug·vs code
猴哥源码24 分钟前
基于Java+SpringBoot的在线小说阅读平台
java·spring boot
lingRJ77724 分钟前
从混沌到掌控:基于OpenTelemetry与Prometheus构建分布式调用链监控告警体系
java·springboot·prometheus·backend·opentelemetry·jaeger·microservices
星辰离彬31 分钟前
Java 与 MySQL 性能优化:Java应用中MySQL慢SQL诊断与优化实战
java·后端·sql·mysql·性能优化
cuijiecheng201836 分钟前
Ubuntu下布署mediasoup-demo
linux·运维·ubuntu
程序猿小D2 小时前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的个人财务管理系统,推荐!
java·数据库·mysql·spring·毕业论文·ssm框架·个人财务管理系统
独行soc2 小时前
2025年渗透测试面试题总结-2025年HW(护网面试) 33(题目+回答)
linux·科技·安全·网络安全·面试·职场和发展·护网
java龙王*3 小时前
开放端口,开通数据库连接权限,无法连接远程数据库 解决方案
linux
转转技术团队3 小时前
二奢仓店的静默打印代理实现
java·后端
钢铁男儿3 小时前
C# 接口(什么是接口)
java·数据库·c#