fetch() 是现代标准但需手动补全 Cookie、错误处理和超时;常见无响应因忘 await/.then(),且 4xx/5xx 不 reject;需检查 res.ok、JSON.stringify、FormData 用法、GET 无 body、credentials 控制跨域 Cookie、AbortController 实现超时与取消。

JavaScript 发送网络请求,fetch() 是现代标准方案,但默认不带 Cookie、不自动处理 4xx/5xx 状态、不支持超时——这些不是“bug”,而是设计选择,得手动补全。
为什么 fetch() 调用后页面没反应?
常见原因是忘记 await 或漏掉 .then(),且 fetch() 只在**网络失败**(如断网、DNS 错误)时 reject,HTTP 状态码 404、500 仍算 fulfilled。
- 检查是否写了
await fetch(...)或fetch(...).then(res => {...}) - 手动判断
res.ok(即res.status >= 200 && res.status ) - 别直接
console.log(fetch(...)),那只是打印一个Promise对象
fetch() 怎么发 POST 并传 JSON?
必须显式设置 Content-Type 请求头,且 body 需是字符串(不能直接传对象)。
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
});
-
JSON.stringify()不可省略,否则后端收不到合法 JSON - 若后端用
form-data,改用FormData实例作body,此时不要设Content-Type(浏览器会自动生成带 boundary 的 header) - GET 请求不能有
body,参数只能拼在 URL 后
如何让 fetch() 带 Cookie 或支持跨域认证?
默认情况下,fetch() 跨域请求不发 Cookie,也不暴露响应头(如 Set-Cookie),需靠 credentials 选项控制。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
立即学习“Java免费学习笔记(深入)”;
- 同域请求:无需额外配置,Cookie 自动携带
- 跨域请求要发 Cookie:加
credentials: 'include',且后端必须返回Access-Control-Allow-Credentials: true - 注意:
credentials: 'include'时,Access-Control-Allow-Origin不能为*,必须指定具体域名
怎么给 fetch() 加超时或取消请求?
fetch() 本身不支持超时,也无原生取消机制,得靠 AbortController + timeout 模拟。
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
fetch('/api/data', {
signal: controller.signal
})
.finally(() => clearTimeout(timeoutId));
-
controller.abort()会触发fetch()Promise reject,错误类型是DOMException,name === 'AbortError' - 多个并发请求共用一个
AbortController可一键取消全部 - 超时时间不能靠
setTimeout精确控制(网络阻塞时可能延迟),仅作粗略防护
真正难的不是调通一次请求,而是统一处理错误路径、鉴权刷新、缓存策略和 loading 状态——fetch() 只是基础工具,封装层才决定项目里请求代码是否可维护。










