JS AJAX完全指南（二）：Axios五种请求方法、跨域解决方案与列表管理系统实战

前言

本文是AJAX系列的第二篇，深入讲解Axios的五种请求方法（GET/POST/PUT/PATCH/DELETE）、全局配置、跨域解决方案（JSONP与CORS），并通过一个完整的列表管理系统实战案例串联所有知识点。掌握这些内容，你将能够独立完成前后端数据交互的增删改查操作。

一、Axios基础回顾

1.1 引入Axios

<script src="../js/axios.js"></script>

1.2 三种请求处理方式

方式

写法

适用场景

// 方式一：Promise链式调用
axios.get("http://localhost:3002/user")
.then((res) => { console.log(res.data); })
.catch((err) => { console.log(err.message); });

// 方式二：回调函数形式
axios.get("http://localhost:3002/user").then(
(res) => { console.log(res.data); },
(err) => { console.log(err); }
);

// 方式三：async/await（推荐）
async function getData() {
try {
let res = await axios.get("http://localhost:3002/user");
console.log(res.data);
} catch (error) {
console.log(error);
}
}

二、Axios五种请求方法详解

2.1 GET请求 — 获取数据

// 基本请求
let res = await axios.get("http://localhost:3001/list");

// 带参数查询 – 方式一：URL拼接
let res = await axios.get("http://localhost:3001/list?name=孙悟空");

// 带参数查询 – 方式二：params对象（推荐）
let res = await axios.get("http://localhost:3001/list", {
params: {
id: 4
}
});

2.2 POST请求 — 新增数据

let obj = {
id: +new Date(), // 使用时间戳作为唯一ID
name: this.inp.value,
age: 2000,
address: "待定"
};

await axios.post("http://localhost:3001/list", obj);

2.3 PUT请求 — 完整更新

PUT请求会用新数据完全替换旧数据，未指定的字段会被清空。

// 更新id为1的记录，只保留name字段
await axios.put("http://localhost:3001/list/1", {
name: this.inpEdit.value
});

2.4 PATCH请求 — 部分更新

PATCH请求只更新指定的字段，其他字段保持不变。

// 更新id为2的记录，只修改name字段
axios.patch("http://localhost:3001/list/2", {
name: this.inpEdit.value
});

2.5 DELETE请求 — 删除数据

let id = this.inpDel.value;
axios.delete(`/list/${id}`);

2.6 五种方法对比

方法

功能

请求体

幂等性

适用场景

三、Axios全局配置

3.1 基本配置项

// 配置全局的超时时长（单位：毫秒）
axios.defaults.timeout = 2000;

// 配置全局的基本URL
axios.defaults.baseURL = "http://localhost:3001";

3.2 使用全局配置后的请求

配置baseURL后，请求路径可以简写为相对路径。

// 配置前
await axios.get("http://localhost:3001/list");
await axios.post("http://localhost:3001/list", obj);

// 配置后（简写）
await axios.get("/list");
await axios.post("/list", obj);

3.3 全局配置的优势

优势

说明

四、跨域解决方案

4.1 同源策略

同源策略（Same-Origin Policy）最早由Netscape公司提出，是浏览器的一种安全策略。

条件

说明

4.2 JSONP原理

JSONP利用<script>标签天然支持跨域的特性来实现跨域请求。

实现原理：

客户端 服务器
│ │
│ 创建<script>标签 │
│ 设置src为跨域URL │
│ ──────────────────────► │
│ │
│ 返回: handleData({"name":"jack"}) │
│ ◄────────────────────── │
│ │
│ 执行handleData函数 │
│ 处理返回的数据 │

客户端实现：

// 客户端定义处理函数
function handleData(data) {
console.log(data); // 处理服务器返回的数据
}

// 创建script标签发起请求
const script = document.createElement("script");
script.src = "http://127.0.0.1:8000/check-username";
document.body.appendChild(script);

JSONP特点：

特性

说明

4.3 CORS（跨域资源共享）

CORS是W3C标准，通过在服务器端设置响应头来实现跨域。

客户端实现（无需特殊处理）：

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/cors-server");
xhr.send();

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
res.innerHTML = xhr.response;
}
};

服务器端需要设置的响应头：

// Node.js Express示例
res.setHeader("Access-Control-Allow-Origin", "*");

4.4 JSONP vs CORS

对比项

JSONP

CORS

五、实战案例：列表管理系统

5.1 类结构设计

class List {
// 元素获取
listOuter = document.querySelector(".listOuter");
inp = document.getElementById("inp");
addBtn = document.getElementById("add");

// 数据管理
mylist = [];

constructor() {
this.getData();
this.addEvent();
}

// 事件绑定
addEvent() {
this.addBtn.addEventListener("click", this.addFun.bind(this));
}

// 数据渲染
gender(mylist) {
let str = "";
mylist.forEach((item) => {
str += `<li>${item.name}<a href="#">删除</a></li>`;
});
this.listOuter.innerHTML = str;
}

// 数据获取
async getData() {
try {
let res = await axios.get("/list");
this.mylist = res.data;
this.gender(this.mylist);
} catch (error) {
console.log(error);
}
}
}

5.2 功能实现要点

要点

说明

实现方式

5.3 完整CRUD操作

class List {
// … 上述代码 …

// 新增数据
async addFun() {
try {
let obj = {
id: +new Date(),
name: this.inp.value,
age: 2000,
address: "待定"
};
await axios.post("/list", obj);
this.getData(); // 重新获取数据
} catch (error) {
console.log(error);
}
}

// 删除数据
async delFun(id) {
try {
await axios.delete(`/list/${id}`);
this.getData(); // 重新获取数据
} catch (error) {
console.log(error);
}
}

// 更新数据（完整更新）
async updateFun(id, newName) {
try {
await axios.put(`/list/${id}`, {
name: newName
});
this.getData(); // 重新获取数据
} catch (error) {
console.log(error);
}
}

// 部分更新
async patchFun(id, field) {
try {
await axios.patch(`/list/${id}`, field);
this.getData(); // 重新获取数据
} catch (error) {
console.log(error);
}
}
}

六、注意事项与最佳实践

6.1 请求方法选择指南

操作

请求方法

说明

6.2 跨域解决方案选择

场景

推荐方案

原因

6.3 错误处理规范

// ✅ 推荐的错误处理方式
try {
let res = await axios.get("/list");
// 处理成功数据
} catch (error) {
// 统一错误处理
console.error("请求失败:", error.message);
alert("数据加载失败，请稍后重试");
}

6.4 性能优化建议

优化项

说明

总结

本文系统梳理了AJAX第二部分的完整知识体系：

主题

核心要点

掌握这些内容，你就具备了完整的前后端数据交互能力，能够独立完成增删改查功能的开发。欢迎持续关注本系列更多进阶内容！