Axios HTTP 请求 request 方法编码模板（GET、POST、PUT、DELETE） ...

一、Axios

1、概述

• Axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求和处理 HTTP 响应
  

2、Axios 引入

• 可在 BootCDN 上面选择合适的 Axios 版本，官方网址：https://www.bootcdn.cn/
  

1. <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

• 路径不带参
  

1. @GetMapping("testGet")
2. public Staff testGet() {
3.     Staff staff = new Staff(1, "jack", 10);
5.     return staff;
6. }

复制代码

• 路径带参
  

1. @GetMapping("/testGetCarryData")
2. public Staff testGetCarryData(@RequestParam("id") Integer id) {
3.     HashMap<Integer, Staff> staffMap = new HashMap<>();
4.     staffMap.put(1, new Staff(1, "jack", 10));
5.     staffMap.put(2, new Staff(2, "tom", 20));
6.     staffMap.put(3, new Staff(3, "smith", 30));
8.     return staffMap.get(id);
9. }

复制代码

（2）Client

• 路径不带参
  

1. axios
2.     .request({
3.         method: "get",
4.         url: "http://localhost:9999/myTest/testGet",
5.     })
6.     .then((response) => {
7.         console.log("请求成功");
8.         if (!response.status || response.status !== 200) return;
9.         console.log(response.data);
10.     })
11.     .catch((error) => {
12.         console.log("请求失败");
13.         console.log(error);
14.     });

复制代码

• 输出结果
  

1. 请求成功
2. {id: 1, name: 'jack', age: 10}

复制代码

• 路径带参
  

1. axios
2.     .request({
3.         method: "get",
4.         url: "http://localhost:9999/myTest/testGetCarryData?id=1",
5.     })
6.     .then((response) => {
7.         console.log("请求成功");
8.         if (!response.status || response.status !== 200) return;
9.         console.log(response.data);
10.     })
11.     .catch((error) => {
12.         console.log("请求失败");
13.         console.log(error);
14.     });

复制代码

1. // 或
3. axios
4.     .request({
5.         method: "get",
6.         url: "http://localhost:9999/myTest/testGetCarryData",
7.         params: {
8.             id: 1,
9.         },
10.     })
11.     .then((response) => {
12.         console.log("请求成功");
13.         if (!response.status || response.status !== 200) return;
14.         console.log(response.data);
15.     })
16.     .catch((error) => {
17.         console.log("请求失败");
18.         console.log(error);
19.     });

复制代码

• 输出结果
  

1. 请求成功
2. {id: 1, name: 'jack', age: 10}

复制代码

2、POST 请求

（1）Server

1. @PostMapping("/testPost")
2. public Staff testPost(@RequestBody TestPostDTO testPostDTO) {
3.     HashMap<Integer, Staff> staffMap = new HashMap<>();
4.     staffMap.put(1, new Staff(1, "jack", 10));
5.     staffMap.put(2, new Staff(2, "tom", 20));
6.     staffMap.put(3, new Staff(3, "smith", 30));
8.     return staffMap.get(testPostDTO.getId());
9. }

复制代码

（2）Client

1. axios
2.     .request({
3.         method: "post",
4.         url: "http://localhost:9999/myTest/testPost",
5.         data: {
6.             id: 1,
7.         },
8.     })
9.     .then((response) => {
10.         console.log("请求成功");
11.         if (!response.status || response.status !== 200) return;
12.         console.log(response.data);
13.     })
14.     .catch((error) => {
15.         console.log("请求失败");
16.         console.log(error);
17.     });

复制代码

• 输出结果
  

1. 请求成功
2. {id: 1, name: 'jack', age: 10}

复制代码

3、PUT 请求

（1）Server

1. @PutMapping("/testPut")
2. public String testPut(@RequestBody TestPutDTO testPutDTO) {
3.     HashMap<Integer, Staff> staffMap = new HashMap<>();
4.     staffMap.put(1, new Staff(1, "jack", 10));
5.     staffMap.put(2, new Staff(2, "tom", 20));
6.     staffMap.put(3, new Staff(3, "smith", 30));
8.     Staff staff = staffMap.get(testPutDTO.getId());
9.     staff.setAge(testPutDTO.getAge());
11.     return "testPut OK";
12. }

复制代码

（2）Client

1. axios
2.     .request({
3.         method: "put",
4.         url: "http://localhost:9999/myTest/testPut",
5.         data: {
6.             id: 1,
7.             age: 40,
8.         },
9.     })
10.     .then((response) => {
11.         console.log("请求成功");
12.         if (!response.status || response.status !== 200) return;
13.         console.log(response.data);
14.     })
15.     .catch((error) => {
16.         console.log("请求失败");
17.         console.log(error);
18.     });

复制代码

• 输出结果
  

1. 请求成功
2. testPut OK

复制代码

4、DELETE 请求

（1）Server

1. @DeleteMapping("/testDelete")
2. public String testDelete(@RequestParam("id") Integer id) {
3.     HashMap<Integer, Staff> staffMap = new HashMap<>();
4.     staffMap.put(1, new Staff(1, "jack", 10));
5.     staffMap.put(2, new Staff(2, "tom", 20));
6.     staffMap.put(3, new Staff(3, "smith", 30));
8.     staffMap.remove(id);
10.     return "testDelete OK";
11. }

复制代码

（2）Client

1. axios
2.     .request({
3.         method: "delete",
4.         url: "http://localhost:9999/myTest/testDelete?id=1",
5.     })
6.     .then((response) => {
7.         console.log("请求成功");
8.         if (!response.status || response.status !== 200) return;
9.         console.log(response.data);
10.     })
11.     .catch((error) => {
12.         console.log("请求失败");
13.         console.log(error);
14.     });

复制代码

1. // 或
3. axios
4.     .request({
5.         method: "delete",
6.         url: "http://localhost:9999/myTest/testDelete",
7.         params: {
8.             id: 1,
9.         },
10.     })
11.     .then((response) => {
12.         console.log("请求成功");
13.         if (!response.status || response.status !== 200) return;
14.         console.log(response.data);
15.     })
16.     .catch((error) => {
17.         console.log("请求失败");
18.         console.log(error);
19.     });

复制代码

• 输出结果
  

1. 请求成功
2. testDelete OK

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。