Axios HTTP 请求 request 方法编码模板（GET、POST、PUT、DELETE）
一、Axios1、概述
[*]Axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求和处理 HTTP 响应
2、Axios 引入
[*]可在 BootCDN 上面选择合适的 Axios 版本，官方网址：https://www.bootcdn.cn/
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.4/axios.js"></script>
3、request 方法
[*] HTTP 协议中最常用的四种请求方法 GET、POST、PUT、DELETE，这些方法对应着 Axios 中的同名方法 get、post、put、delete 方法
[*] Axios 中还有一个底子的、高灵活性的 request 方法，它允许执行任何类型的 HTTP 请求
二、Axios HTTP 请求 request 方法
1、GET 请求
（1）Server
[*]路径不带参
@GetMapping("testGet")
public Staff testGet() {
Staff staff = new Staff(1, "jack", 10);
return staff;
}
[*]路径带参
@GetMapping("/testGetCarryData")
public Staff testGetCarryData(@RequestParam("id") Integer id) {
HashMap<Integer, Staff> staffMap = new HashMap<>();
staffMap.put(1, new Staff(1, "jack", 10));
staffMap.put(2, new Staff(2, "tom", 20));
staffMap.put(3, new Staff(3, "smith", 30));
return staffMap.get(id);
}
（2）Client
[*]路径不带参
axios
.request({
method: "get",
url: "http://localhost:9999/myTest/testGet",
})
.then((response) => {
console.log("请求成功");
if (!response.status || response.status !== 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
[*]输出结果
请求成功
{id: 1, name: 'jack', age: 10}
[*]路径带参
axios
.request({
method: "get",
url: "http://localhost:9999/myTest/testGetCarryData?id=1",
})
.then((response) => {
console.log("请求成功");
if (!response.status || response.status !== 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
// 或
axios
.request({
method: "get",
url: "http://localhost:9999/myTest/testGetCarryData",
params: {
id: 1,
},
})
.then((response) => {
console.log("请求成功");
if (!response.status || response.status !== 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
[*]输出结果
请求成功
{id: 1, name: 'jack', age: 10}
2、POST 请求
（1）Server
@PostMapping("/testPost")
public Staff testPost(@RequestBody TestPostDTO testPostDTO) {
HashMap<Integer, Staff> staffMap = new HashMap<>();
staffMap.put(1, new Staff(1, "jack", 10));
staffMap.put(2, new Staff(2, "tom", 20));
staffMap.put(3, new Staff(3, "smith", 30));
return staffMap.get(testPostDTO.getId());
}
（2）Client
axios
.request({
method: "post",
url: "http://localhost:9999/myTest/testPost",
data: {
id: 1,
},
})
.then((response) => {
console.log("请求成功");
if (!response.status || response.status !== 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
[*]输出结果
请求成功
{id: 1, name: 'jack', age: 10}
3、PUT 请求
（1）Server
@PutMapping("/testPut")
public String testPut(@RequestBody TestPutDTO testPutDTO) {
HashMap<Integer, Staff> staffMap = new HashMap<>();
staffMap.put(1, new Staff(1, "jack", 10));
staffMap.put(2, new Staff(2, "tom", 20));
staffMap.put(3, new Staff(3, "smith", 30));
Staff staff = staffMap.get(testPutDTO.getId());
staff.setAge(testPutDTO.getAge());
return "testPut OK";
}
（2）Client
axios
.request({
method: "put",
url: "http://localhost:9999/myTest/testPut",
data: {
id: 1,
age: 40,
},
})
.then((response) => {
console.log("请求成功");
if (!response.status || response.status !== 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
[*]输出结果
请求成功
testPut OK
4、DELETE 请求
（1）Server
@DeleteMapping("/testDelete")
public String testDelete(@RequestParam("id") Integer id) {
HashMap<Integer, Staff> staffMap = new HashMap<>();
staffMap.put(1, new Staff(1, "jack", 10));
staffMap.put(2, new Staff(2, "tom", 20));
staffMap.put(3, new Staff(3, "smith", 30));
staffMap.remove(id);
return "testDelete OK";
}
（2）Client
axios
.request({
method: "delete",
url: "http://localhost:9999/myTest/testDelete?id=1",
})
.then((response) => {
console.log("请求成功");
if (!response.status || response.status !== 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
// 或
axios
.request({
method: "delete",
url: "http://localhost:9999/myTest/testDelete",
params: {
id: 1,
},
})
.then((response) => {
console.log("请求成功");
if (!response.status || response.status !== 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
[*]输出结果
请求成功
testDelete OK
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]