本文讲解如何正确使用 fetch 和 async/await 检测远程网页是否包含某段文本，解决因忽略 promise 异步特性导致的 cannot read properties of undefined 错误。
本文讲解如何正确使用 fetch 和 async/await 检测远程网页是否包含某段文本，解决因忽略 promise 异步特性导致的 cannot read properties of undefined 错误。
你在代码中遇到的 Uncaught TypeError: Cannot read properties of undefined (reading 'includes') 错误，根本原因在于 fetch() 返回的是一个 Promise，而非立即可用的响应体。你将 page.text（一个函数引用）直接赋值给 body，又试图对其调用 .includes() —— 这等价于对 undefined 或函数对象执行字符串方法，自然报错。
此外，{ mode: 'no-cors' } 会限制响应的可读性：启用 no-cors 模式时，浏览器仅允许“简单请求”，且返回的 Response 对象是 opaque（不透明）的，此时调用 .text() 将抛出 TypeError（即使加了 await），无法获取实际 HTML 内容。因此，该模式不适用于文本检测场景。
✅ 正确做法是：
- 使用 async/await 显式等待 fetch() 完成，并确保响应状态有效；
- 调用 response.text()（注意是方法调用 page.text()，不是属性访问 page.text）；
- 处理网络错误、跨域限制及 4xx/5xx 状态码；
- 在现代浏览器环境中运行（如 DevTools 控制台或支持模块的 HTML 页面）。
以下是修复后的完整示例：
const checkForText = async (url, text) => {
try {
const response = await fetch(url);
// 检查 HTTP 状态是否成功（2xx）
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const body = await response.text(); // ✅ 正确：调用 .text() 方法
if (body.includes(text)) {
console.log(`Passed. "${text}" found on ${url}`);
return true;
} else {
console.error(`Failed. Did not find "${text}" on ${url}!`);
return false;
}
} catch (error) {
console.error(`Request failed for ${url}:`, error.message);
return false;
}
};
// 调用方式（需在 async 上下文中）
(async () => {
await checkForText('https://dsbelmex.biz/nosotros/', 'equilibrio');
})();
⚠️ 重要注意事项：
- 跨域限制（CORS）：若目标网站未设置 Access-Control-Allow-Origin 响应头，fetch 将被浏览器阻止（即使页面能正常打开）。此时需后端代理或服务端脚本（如 Node.js + axios）绕过限制。
- 避免 no-cors：除非你明确需要发送跨域请求且只关心请求是否发出（不读响应），否则请移除 { mode: 'no-cors' }。
- 性能与合规性：频繁爬取他人网站可能违反 robots.txt 或服务条款，请合理控制请求频率，并优先考虑官方 API。
- 大小写敏感：String.prototype.includes() 区分大小写；如需模糊匹配，可用 body.toLowerCase().includes(text.toLowerCase())。
掌握 fetch 的异步本质与响应处理流程，是前端数据交互的基础能力。从 page.text 到 await page.text() 的转变，不仅是语法修正，更是对 JavaScript 执行模型的深入理解。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
