Spring Boot+Vue｜axios异步请求数据的12种操作（下篇）
Spring Boot+Vue｜axios异步请求数据的12种操作（下篇）
致力于最高效的Java学习
上一篇 axios 教程中，我已经为大家详细讲解了 axios 异步请求数据的前 6 种操作方式：Spring Boot+Vue｜axios异步请求数据的12种操作（上篇）
今天我们继续讲解其余的 6 种操作。
7、基于 RESTful POST 请求 + 普通变量传参
基于 RESTful 的 axios 异步 POST 请求的方法为 axios.post(url).then()
url：请求的 URL，直接追加参数。
then()：请求成功的回调函数。
Vue 代码如下所示。
<template>
<div>
<button type="button" @click="restPostData()">restPostData</button><br/>
</div>
</template>
<script>
export default {
methods: {
restPostData(){
const _this = this
axios.post('http://localhost:8181/restPostData/1').then(function (resp) {
console.log(resp.data)
})
}
}
}
</script>Spring Boot 代码如下所示。
@PostMapping("/restPostData/{id}")
public User restPostData(@PathVariable("id") Integer id){
System.out.println(id);
return new User(1,"张三");
}分别启动 Vue 和 Spring Boot，点击 restPostData 按钮，结果如下图所示。
8、基于 RESTful POST 请求 + JSON 传参
基于 RESTful 的 axios 异步 POST 请求的方法为 axios.post(url,params).then()
url：请求的 URL。
params：参数，需要将参数封装到 URLSearchParams 对象中。
then()：请求成功的回调函数。
Vue 代码如下所示。
<template>
<div>
<button type="button" @click="restPostJSON()">restPostJSON</button><br/>
</div>
</template>
<script>
export default {
methods: {
restPostJSON(){
const _this = this
var params = new URLSearchParams()
params.append('id', '1')
params.append('name', '张三')
axios.post('http://localhost:8181/restPostJSON',params).then(function (resp) {
console.log(resp.data)
})
}
}
}
</script>Spring Boot 代码如下所示。
@PostMapping("/restPostJSON")
public User restPostJSON(User user){
System.out.println(user);
return new User(1,"张三");
}分别启动 Vue 和 Spring Boot，点击 restPostJSON 按钮，结果如下图所示。
9、基于 RESTful PUT 请求 + 普通变量传参
基于 RESTful 的 axios 异步 POST 请求的方法为 axios.put(url).then()
url：请求的 URL，直接追加参数。
then()：请求成功的回调函数。
Vue 代码如下所示。
<template>
<div>
<button type="button" @click="restPutData()">restPutData</button><br/>
</div>
</template>
<script>
export default {
methods: {
restPutData(){
const _this = this
axios.put('http://localhost:8181/restPutData/1').then(function (resp) {
console.log(resp.data)
})
}
}
}
</script>Spring Boot 代码如下所示。
@PutMapping("/restPutData/{id}")
public User restPutData(@PathVariable("id") Integer id){
System.out.println(id);
return new User(1,"张三");
}分别启动 Vue 和 Spring Boot，点击 restPutData 按钮，结果如下图所示。
10、基于 RESTful PUT 请求 + JSON 传参
基于 RESTful 的 axios 异步 POST 请求的方法为 axios.put(url,params).then()
url：请求的 URL。
params：参数，需要将参数封装到 URLSearchParams 对象中。
then()：请求成功的回调函数。
Vue 代码如下所示。
<template>
<div>
<button type="button" @click="restPutJSON()">restPutJSON</button><br/>
</div>
</template>
<script>
export default {
methods: {
restPutJSON(){
const _this = this
var params = new URLSearchParams()
params.append('id', '1')
params.append('name', '张三')
axios.put('http://localhost:8181/restPutJSON',params).then(function (resp) {
console.log(resp.data)
})
}
}
}
</script>Spring Boot 代码如下所示。
@PutMapping("/restPutJSON")
public User restPutJSON(User user){
System.out.println(user);
return new User(1,"张三");
}分别启动 Vue 和 Spring Boot，点击 restPutJSON 按钮，结果如下图所示。
11、基于 RESTful DELETE 请求 + 普通变量传参
基于 RESTful 的 axios 异步 POST 请求的方法为 axios.delete(url).then()
url：请求的 URL，直接追加参数。
then()：请求成功的回调函数。
Vue 代码如下所示。
<template>
<div>
<button type="button" @click="restDeleteData()">restDeleteData</button><br/>
</div>
</template>
<script>
export default {
methods: {
restDeleteData(){
const _this = this
axios.delete('http://localhost:8181/restDeleteData/1').then(function (resp) {
console.log(resp.data)
})
}
}
}
</script>Spring Boot 代码如下所示。
@DeleteMapping("/restDeleteData/{id}")
public User restDeleteData(@PathVariable("id") Integer id){
System.out.println(id);
return new User(1,"张三");
}分别启动 Vue 和 Spring Boot，点击 restDeleteData 按钮，结果如下图所示。
12、基于 RESTful DELETE 请求 + JSON 传参
基于 RESTful 的 axios 异步 POST 请求的方法为 axios.delete(url,params).then()
url：请求的 URL。
params：参数，格式为 {params:{name:value,name:value}} 。
then()：请求成功的回调函数。
Vue 代码如下所示。
<template>
<div>
<button type="button" @click="restDeleteJSON()">restDeleteJSON</button><br/>
</div>
</template>
<script>
export default {
methods: {
restDeleteJSON(){
const _this = this
var user = {
id:1,
name:'张三'
}
axios.delete('http://localhost:8181/restDeleteJSON',{params:user}).then(function (resp) {
console.log(resp.data)
})
}
}
}
</script>Spring Boot 代码如下所示。
@DeleteMapping("/restDeleteJSON")
public User restDeleteJSON(User user){
System.out.println(user);
return new User(1,"张三");
}分别启动 Vue 和 Spring Boot，点击 restDeleteJSON 按钮，结果如下图所示。
以上就是 axios 异步请求数据的 6 种形式，你都学会了吗？