本文详解 React 中使用 fetch 发送 POST 请求后无法获取服务器返回文本（如 "Hello World"）的根本原因及解决方案，重点说明 Promise 链中必须显式返回 response.text() 才能将解析后的字符串传递给后续 .then()，并纠正错误的 .then() 误用异常处理方式。
本文详解 react 中使用 fetch 发送 post 请求后无法获取服务器返回文本（如 "hello world"）的根本原因及解决方案，重点说明 promise 链中必须显式返回 `response.text()` 才能将解析后的字符串传递给后续 `.then()`，并纠正错误的 `.then()` 误用异常处理方式。
在 React（或其他前端环境）中调用 fetch() 发起 HTTP 请求时，response.text() 是一个返回 Promise 的异步方法，而非直接返回字符串。若在 .then() 回调中仅调用 response.text() 而未 return，该 Promise 将被丢弃，后续 .then() 接收到的值为 undefined——这正是控制台输出 [undefined] 两次的根源。
此外，最后一个 .then((error) => {...}) 的写法是严重误区：.then() 仅处理上一个 Promise 的 成功值，无法捕获错误；异常必须通过 .catch() 显式声明。
✅ 正确写法如下（推荐使用 async/await 提升可读性，也提供链式 Promise 修正版）：
方案一：使用 async/await（更清晰、推荐）
async function fetchHello() {
try {
const response = await fetch('http://localhost:80', {
method: 'POST',
headers: { 'Accept': 'text/plain' } // 建议明确指定 text/plain
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const msg = await response.text(); // 等待文本解析完成
console.log(msg); // ✅ 正确输出 "Hello World!"
} catch (error) {
console.error('Fetch failed:', error);
}
}
方案二：修正 Promise 链（保留原风格）
fetch('http://localhost:80', {
method: 'POST',
headers: { 'Accept': 'text/plain' }
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return response.text(); // ✅ 必须 return！否则下一个 .then 接收 undefined
})
.then(msg => {
console.log(msg); // ✅ 现在能正确打印 "Hello World!"
})
.catch(error => { // ✅ 使用 .catch 处理网络错误、解析失败等
console.error('Request failed:', error);
});
⚠️ 注意事项：
-
headers: {'Accept': 'text/*'}不规范，建议改为'text/plain'或省略（浏览器默认支持文本）； - PHP 脚本中
header('Access-Control-Allow-Origin: http://localhost:3000')仅允许单源，若开发端口变更需同步更新； -
response.text()只能调用一次（Body 已读取），重复调用会返回空字符串； - 确保 PHP 输出无额外空白或 BOM 字符，避免干扰
text()解析结果（可在echo前加ob_clean()或检查文件编码）。
总结：Fetch 的响应体解析（.text()、.json() 等）本质是异步操作，必须在 Promise 链中 return 其返回的 Promise，才能延续数据流；错误处理永远使用 .catch()，而非 .then() 的第三个参数（已废弃）或错误形参。掌握这一模式，即可稳定获取服务端返回的文本内容。
