Request构造函数仅预配置请求,不发送网络请求;必须传给fetch()才真正发起调用,且method须全大写、headers与body需严格匹配格式。

Request 构造函数不发送请求,只做预配置
它只是生成一个 Request 实例,后续必须传给 fetch() 才真正发起网络调用。直接 new 一个 Request 对象不会触发任何 HTTP 请求,也不会校验 URL 是否合法、headers 是否被浏览器拦截、body 是否可序列化——这些检查都推迟到 fetch() 执行时才发生。
常见误用是以为 new Request(...) 就等同于发请求,结果发现控制台没日志、没报错、也没响应,其实是忘了调 fetch(myRequest)。
method 必须全大写且显式声明,GET 不是“默认就安全”
method 字段大小写敏感,必须是 "GET"、"POST"、"PUT" 等全大写字符串;小写如 "get" 会被当作非法值,导致 fetch 报 TypeError: Failed to construct 'Request': Please use a valid HTTP method。
- 即使你只读数据,也建议显式写
method: "GET",避免依赖默认行为(尤其在某些 polyfill 或旧环境里默认值可能不同) -
HEAD和OPTIONS同样支持,但注意:浏览器对HEAD的body会静默丢弃,即使你配了也不会发出去 -
DELETE可带 body,但不是所有服务端框架默认解析——别假设后端一定能收到
headers 和 body 必须匹配,否则后端收不到或解析失败
这是最常踩的坑:header 声明了 "Content-Type": "application/json",但 body 是个裸对象 { user: "a" },结果 fetch 发出去的是 [object Object],后端 JSON 解析直接报错。
正确配对方式:
- JSON 数据 →
body: JSON.stringify({})+headers: { "Content-Type": "application/json" } - 表单数据 →
body: new FormData(formEl),**不要手动设Content-Type**,浏览器会自动生成multipart/form-data; boundary=... - URL 编码参数 →
body: new URLSearchParams({ q: "js" })+headers: { "Content-Type": "application/x-www-form-urlencoded" } - 二进制文件(Blob/File)→ 直接赋给
body,不设Content-Type(浏览器自动推断)或按需指定,如"image/png"
注意:GET 和 HEAD 方法下设置 body 会被忽略,且部分浏览器会直接抛错。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
credentials、mode、cache 这些字段影响跨域和缓存行为,不能靠 guess
比如你想带 Cookie 请求跨域接口,只写 credentials: "include" 是不够的——如果服务端没返回 Access-Control-Allow-Credentials: true,浏览器会直接拒绝响应,连 response.status 都拿不到。
几个关键字段的实际影响:
-
mode: "cors"(推荐显式写):允许跨域,但只暴露有限 header(Content-Type、X-Custom-Header等需服务端额外声明Access-Control-Expose-Headers) -
mode: "no-cors":浏览器允许发请求,但 JavaScript 无法读取响应(response.type === "opaque"),仅适用于埋点、打日志等无需读响应的场景 -
cache: "no-store"强制不缓存;"force-cache"会跳过网络直接用缓存(即使过期);默认"default"行为较复杂,受 HTTP 头和浏览器策略共同影响 -
redirect: "manual"可捕获重定向响应(response.type === "opaqueredirect"),用于需要自己处理跳转逻辑的场景
这些字段一旦配错,问题往往表现为“请求发出去了但 response 拿不到数据”“本地开发正常,上线就跨域失败”“重复提交表单却没反应”——表面看是 fetch 问题,实际是预配置没对齐服务端约束。
Request 构造函数本身不校验兼容性,但不同浏览器对 cache、redirect 默认值的历史差异仍然存在(比如 Chrome 47 前后),所以关键字段建议始终显式声明,而不是依赖“应该没问题”的假设。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










