【Fetch】AI 自动化中的应用——从接口请求到数据获取

一、引言

在当下的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 的价值不仅是发送网络请求，更重要的是提供了一种不同于模拟页面操作的数据获取方式。

在自动化项目中，常见的实现方式包括：

例如，使用 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 有三个实际意义：

自动化开发不应该只关注如何模拟用户操作，还需要理解网页数据的来源，以及程序如何与接口进行交互。

从页面操作走向接口调用，也是自动化项目逐步工程化的一种体现。