ToB企服应用市场:ToB评测及商务社交产业平台

标题: Axios传值的几种方式 [打印本页]

作者: 欢乐狗 时间: 2024-6-15 01:59
标题: 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)

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

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4