一、Axios
1、概述
- 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>
二、RESTful 风格
-
RESTful 风格基于 HTTP 协议,强调资源的表示,即一目了然,例如,普通风格的请求
/reqUser?id=【id】
在 RESTful 风格下就是/reqUser/{【id】}
-
RESTful 风格与普通风格的差异主要体现在理念上,而编码风格差异不大,所以我们不需要有什么心理负担
三、Axios HTTP 请求 RESTful 风格
1、GET 请求
(1)Server
- 路径不带参
@GetMapping("/testRestfulGet")
public Staff testRestfulGet() {
Staff staff = new Staff(1, "jack", 10);
return staff;
}
- 路径带参
@GetMapping("/testRestfulGetCarryData/{id}")
public Staff testGetRestfulCarryData(@PathVariable 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
.get("http://localhost:9999/myRestfulTest/testRestfulGet")
.then((response) => {
console.log("请求成功");
if (response.status == null || response.status != 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
- 输出结果
请求成功
{id: 1, name: 'jack', age: 10}
- 路径带参
axios
.get("http://localhost:9999/myRestfulTest/testRestfulGetCarryData/1")
.then((response) => {
console.log("请求成功");
if (response.status == null || 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("/testRestfulPost")
public Staff testRestfulPost(@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
.post("http://localhost:9999/myRestfulTest/testRestfulPost", {
id: 1,
})
.then((response) => {
console.log("请求成功");
if (response.status == null || 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("/testRestfulPut")
public String testRestfulPut(@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
.put("http://localhost:9999/myRestfulTest/testRestfulPut", {
id: 1,
age: 40,
})
.then((response) => {
console.log("请求成功");
if (response.status == null || response.status != 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
- 输出结果
请求成功
testPut OK
4、DELETE 请求
(1)Server
@DeleteMapping("/testRestfulDelete/{id}")
public String testRestfulDelete(@PathVariable 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
.delete("http://localhost:9999/myRestfulTest/testRestfulDelete/1")
.then((response) => {
console.log("请求成功");
if (response.status == null || response.status != 200) return;
console.log(response.data);
})
.catch((error) => {
console.log("请求失败");
console.log(error);
});
- 输出结果
请求成功
testDelete OK