一、引言
在当下的AI 编程和自动化开发场景中，我们经常需要从网页获取数据。
传统的浏览器自动化通常通过模拟点击、等待页面加载，再定位元素提取数据。但如果网页本身就是通过 HTTP 接口获取数据，是否可以跳过部分页面操作，直接请求接口？
这就涉及本文的核心技术：Fetch。
Fetch 是 JavaScript 提供的网络请求 API，可以向服务器发送 HTTP 请求，并获取 JSON 等格式的数据。理解 Fetch，有助于我们从单纯的页面操作转向更直接的数据获取方式。
二、Fetch 是什么？
Fetch 是现代浏览器内置的网络请求 API，主要用于发送 HTTP 请求和接收服务器响应。
例如，获取一个公开接口的数据：
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts/1"
);
const data = await response.json();
console.log(data);整个过程可以简单理解为：
指定接口 URL
↓
Fetch 发送 HTTP 请求
↓
服务器返回响应
↓
解析 JSON 数据
↓
获得 JavaScript 对象与传统的页面解析相比，Fetch 可以直接获取接口返回的结构化数据，减少对页面元素和布局的依赖。
三、Fetch 的基本用法
3.1 GET 请求
GET 通常用于获取数据：
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts/1"
);
if (!response.ok) {
throw new Error(`HTTP错误：${response.status}`);
}
const data = await response.json();
console.log(data);其中：
fetch()：发起网络请求。
response.ok：检查 HTTP 状态是否成功。
response.status：获取 HTTP 状态码。
response.json()：将响应正文解析为 JSON 数据。
需要注意，Fetch 不会因为服务器返回 404 或 500 就自动抛出异常，因此需要主动检查 response.ok。
3.2 POST 请求
POST 常用于向服务器提交数据：
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts",
{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
title: "测试标题",
body: "测试内容",
userId: 1
})
}
);
const data = await response.json();
console.log(data);这里需要注意两个参数：
headers：设置请求头，说明提交的数据格式。
body：请求正文，使用JSON.stringify()将对象转换为 JSON 字符串。
四、Fetch 的异步处理与异常捕获
Fetch 使用 Promise 处理异步请求，因此可以通过 async/await 等待请求完成。
实际项目中，除了检查 HTTP 状态，还需要处理网络异常、请求超时和数据解析失败等情况。
例如：
async function getData() {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts/1",
{
signal: AbortSignal.timeout(5000)
}
);
if (!response.ok) {
throw new Error(`HTTP错误：${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error("请求失败：", error);
throw error;
}
}
getData();这里通过 AbortSignal.timeout() 设置了 5 秒超时限制。
这样，即使接口长时间没有响应，程序也不会无限等待。
五、Fetch 在 AI 自动化中的应用
Fetch 的价值不仅是发送网络请求，更重要的是提供了一种不同于模拟页面操作的数据获取方式。
在自动化项目中，常见的实现方式包括：
| 技术 | 主要用途 |
|---|---|
| Playwright 页面操作 | 模拟点击、输入和页面交互 |
| JavaScript Fetch | 在浏览器或其他支持的 JS 环境中请求接口 |
| Python Requests | 通过 Python 直接发送 HTTP 请求 |
例如，使用 Python 获取相同的数据：
import requests
url = "https://jsonplaceholder.typicode.com/posts/1"
response = requests.get(url, timeout=10)
response.raise_for_status()
data = response.json()
print(data)两者都能完成 HTTP 请求，但运行环境不同。
浏览器中的 Fetch 会受到 CORS 等浏览器安全策略限制，而 Python Requests 不受浏览器 CORS 机制约束，但也不会自动继承浏览器登录状态。
浏览器 Fetch 与页面自动化的结合
在一些自动化项目中，浏览器已经完成登录，并建立了相应的会话。
此时，可以考虑在 Playwright 中执行浏览器页面上下文的 Fetch 请求：
const data = await page.evaluate(async () => {
const response = await fetch(
"https://example.com/api/data"
);
if (!response.ok) {
throw new Error(`HTTP错误：${response.status}`);
}
return await response.json();
});这里的 page.evaluate() 会在浏览器页面上下文中执行 JavaScript。
与直接使用 Python Requests 相比，这种方式可以利用当前页面上下文适用的 Cookie 和浏览器请求环境，但仍然受到接口权限和浏览器安全策略的约束。
对于 AI 自动化项目，可以根据实际需求选择：
需要页面交互时，使用 Playwright。
已有可用接口时，优先考虑 Fetch 或 HTTP 请求库。
需要数据整理和分析时，可以交给 Python 等工具处理。
六、总结
Fetch 是现代 JavaScript 中常用的网络请求 API，能够帮助开发者直接获取服务器返回的数据。
对于 AI 编程和自动化开发而言，理解 Fetch 有三个实际意义：
减少不必要的页面操作： 如果存在合适的数据接口，可以直接获取结构化数据。
提高自动化效率： 请求与数据处理分离，代码更容易维护。
优化技术选型： 根据任务需求，在浏览器操作、Fetch 和 Python HTTP 请求之间选择合适的方案。
自动化开发不应该只关注如何模拟用户操作，还需要理解网页数据的来源，以及程序如何与接口进行交互。
从页面操作走向接口调用，也是自动化项目逐步工程化的一种体现。