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

今天我们继续讲解其余的 6 种操作。

7、基于 RESTful POST 请求 + 普通变量传参

基于 RESTful 的 axios 异步 POST 请求的方法为 axios.post(url).then()

url：请求的 URL，直接追加参数。

then()：请求成功的回调函数。

Vue 代码如下所示。

<template>
 

 <button>restPostData/<button>

 

/<template>

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>
 

 <button>restPostJSON/<button>

 

/<template>

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()

then()：请求成功的回调函数。

Vue 代码如下所示。

<template>
 

 <button>restPutData/<button>

 

/<template>

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>
 

 <button>restPutJSON/<button>

 

/<template>

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>
 

 <button>restDeleteData/<button>

 

/<template>

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>
 

 <button>restDeleteJSON/<button>

 

/<template>

Spring Boot 代码如下所示。

@DeleteMapping("/restDeleteJSON")
public User restDeleteJSON(User user){ 

 System.out.println(user);
 return new User(1,"张三");
}

分别启动 Vue 和 Spring Boot，点击 restDeleteJSON 按钮，结果如下图所示。

以上就是 axios 异步请求数据的 6 种形式，你都学会了吗？