Spring Boot+Vue｜axios异步请求数据的12种操作（下篇）

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>