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 種形式，你都學會了嗎？