<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>axios基本使用
默認(rèn)是get請求
注意：get請求無請求體，可以有body,但是不建議帶
使用get方式進(jìn)行無參請求
<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方式請求，參數(shù)值直接放在路徑中
?
<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方式請求，參數(shù)拼接在路徑中：方式①?
<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方式請求，參數(shù)拼接在路徑中：方式②
<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方式請求，拼接多個(gè)參數(shù)在路徑中：方式③?
<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格式數(shù)據(jù)
<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并發(fā)請求
<script>
axios.all([
axios.get('http://localhost:8080/get/getAll'),
axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
]).then(res=>{
//返回的是數(shù)組，請求成功返回的數(shù)組
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方法處理返回的數(shù)組
<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; //設(shè)置超時(shí)時(shí)間
//發(fā)送請求
axios.get('get/getAll').then(res=>{
console.log(res.data.data)
});
axios.post('post/getAll').then(res=>{
console.log(res.data.data)
});
</script>axios實(shí)例?文章來源：http://www.zghlxwxcb.cn/news/detail-854677.html
<script>
//創(chuàng)建實(shí)例
let request = axios.create({
baseURL:'http://localhost:8080',
timeout:5000
});
//使用實(shí)例
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各種參數(shù)攜帶方式詳解 - 知乎 (zhihu.com)文章來源地址http://www.zghlxwxcb.cn/news/detail-854677.html
到了這里，關(guān)于Axios傳值的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
