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

一、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>

3、request 方法

1. HTTP 协议中最常用的四种请求方法 GET、POST、PUT、DELETE，这些方法对应着 Axios 中的同名方法 get、post、put、delete 方法

2. Axios 中还有一个基础的、高灵活性的 request 方法，它允许执行任何类型的 HTTP 请求

---

二、Axios HTTP 请求 request 方法

1、GET 请求

（1）Server

1. 路径不带参

@GetMapping("testGet")
public Staff testGet() {
    Staff staff = new Staff(1, "jack", 10);

    return staff;
}

2. 路径带参

@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

1. 路径不带参

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}

2. 路径带参

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