PHP echo内容无法返回至fetch，JS轮询页面内无回调求助

首先修复明显的语法错误 #

你的第一个JavaScript调用代码存在语法错误，第二个.then()后面的分号会打断Promise链，导致后续的.catch()无法正确绑定：

// 错误写法
fetch("Receipts/check_file2.php?filename="+receiptFilename)
.then(response => response.json())
.then(data => console.log("got it")); // 这里的分号是问题所在
.catch(error => console.log(error));

// 正确写法
fetch("Receipts/check_file2.php?filename="+receiptFilename)
.then(response => response.json())
.then(data => console.log("got it"))
.catch(error => console.log(error)); // 移除分号

这个错误会直接导致脚本抛出语法异常，后续逻辑完全不执行，这很可能是嵌入页面时回调不触发的核心原因之一。

PHP轮询脚本无输出的可能原因 #

1. 输出缓冲未刷新 #

PHP默认可能开启输出缓冲，即使执行了echo，内容也会被暂存到缓冲区，直到脚本结束或缓冲区满才发送给客户端。而你的脚本中有sleep()，会导致缓冲区一直未刷新，即使echo后exit()，部分服务器也可能不自动刷新。

解决办法：在echo后手动刷新缓冲区：

if ($content !== false) {
    error_log("Found file " . $filename);
    echo json_encode(["success" => true, "content" => $content]);
    ob_flush(); // 刷新PHP内部缓冲区
    flush();    // 刷新服务器到客户端的缓冲区
    exit();
}

2. 文件权限问题 #

虽然file_exists()返回true，但file_get_contents()可能因为文件权限不足无法读取内容，导致json_encode()处理空值或错误内容，最终输出无效JSON，前端response.json()解析失败但未被捕获。

验证方式：在PHP中打印file_get_contents()的结果到错误日志：

$content = checkFile($filename);
error_log("File content: " . $content);

如果内容为空或错误，检查文件的读写权限，确保PHP进程（通常是www-data用户）有权限读取该文件。

JavaScript轮询回调不触发的可能原因 #

1. 页面事件循环被阻塞 #

如果网站中有大量同步执行的代码（比如复杂DOM操作、大型循环、同步AJAX请求），会阻塞浏览器的事件循环，导致Promise的回调（then/catch）和setTimeout无法按时执行。

排查方式：打开Chrome DevTools的Performance标签，录制页面执行过程，查看是否有超过50ms的长任务，这些任务会阻塞事件循环。

解决办法：将长同步任务拆分为异步任务，使用requestIdleCallback或setTimeout分块执行，给事件循环留出处理Promise的时间。

2. 脚本执行时机错误 #

如果你的轮询脚本在页面DOM未加载完成就执行，或者依赖的函数（比如foundReceipt/failReceipt）还未定义，会导致调用失败但无明显报错。

解决办法：确保脚本在DOM加载完成后执行，或者将函数定义放在调用之前：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  fetchJsonWithRetry('Receipts/Receipt241029043021.json')
    .then(data => foundReceipt(data))
    .catch(error => failReceipt());
});

3. Content-Security-Policy (CSP)限制 #

页面的CSP规则可能禁止了fetch请求，导致请求被浏览器拦截，这种情况下控制台的Security标签会显示相关错误，但不会在Console标签中直接提示。

排查方式：打开Chrome DevTools的Security标签，查看是否有CSP违规提示。

解决办法：调整页面的CSP头，在connect-src中允许目标URL，例如：

Content-Security-Policy: connect-src 'self' Receipts/

4. 请求被意外终止 #

如果页面在轮询过程中发生跳转、刷新，或者脚本被其他代码终止（比如location.href改变），会导致fetch请求被取消，回调自然不会触发。

排查方式：在Network标签中查看请求状态，如果显示canceled，说明请求被终止。

解决办法：确保轮询过程中页面不会意外跳转，或者在跳转前取消轮询任务。

通用排查技巧 #

1. 查看Network请求：在Chrome DevTools的Network标签中，检查fetch请求的状态、响应头和响应内容，确认请求是否成功发送、服务器是否返回了正确的内容。
2. 捕获所有错误：在JS代码中添加全局错误捕获，避免遗漏异常：

window.addEventListener('error', function(e) {
  console.error('Global error:', e.error);
});
window.addEventListener('unhandledrejection', function(e) {
  console.error('Unhandled promise rejection:', e.reason);
});

3. 简化测试：将轮询代码单独放在一个空白HTML页面中测试，如果正常，再逐步添加网站的其他脚本，定位是哪个脚本导致的冲突。

内容的提问来源于stack exchange，提问作者Bruce Merritt