JavaScript 中 Fetch 怎么处理请求体的大小限制校验-js教程-PHP中文网

fetch 不提供请求体大小限制校验，需前端主动实现：对 json 用 textencoder 计算字节数，formdata 需分项累加字符串和文件大小并预留边界开销，结合提示与降级策略提升体验。

javascript 中 fetch 怎么处理请求体的大小限制校验

Fetch 本身不提供请求体大小限制校验功能，它只是浏览器原生的网络请求 API，不会主动拦截或检查请求体（如 body）的字节长度。真正的限制来自服务器、代理、网关或浏览器自身（极少见），而前端需**主动实现校验逻辑**，在调用 fetch() 前判断数据是否超标。

明确限制来源，避免误解

很多人误以为 fetch 有内置的 body 大小上限，其实：

Chrome/Firefox 对 fetch() 请求体没有硬性字节限制（远大于常见场景，例如可轻松发送几十 MB 的 Blob）；
真正卡住你的通常是后端（如 Node.js Express 默认 100KB，Nginx 默认 1MB），或中间件（如 API 网关限 5MB）；
用户上传大文件时，若未提前校验，请求会失败并返回 413 Payload Too Large 等状态，体验差且浪费带宽。

前端主动校验请求体大小的方法

核心思路：在构造 fetch() 的 body 后、发起前，计算其近似字节长度，并与预设阈值比对。

文本类 body（JSON、表单字符串）：用 new TextEncoder().encode(str).length 获取 UTF-8 字节数（比 str.length 准确，因中文等字符占多字节）；
FormData：无法直接获取总大小（内部是异步 blob 拼接），需遍历字段估算——字符串字段用 TextEncoder，File/Blob 字段用 .size 属性；
Blob / ArrayBuffer / Uint8Array：直接读取 .size、.byteLength 或 .length 即可。

示例（JSON body 校验）：

Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互，使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载

const data = { title: "测试", content: "a".repeat(2 * 1024 * 1024) }; // 约 2MB
const jsonStr = JSON.stringify(data);
const byteLength = new TextEncoder().encode(jsonStr).length;
<p>if (byteLength > 1.5 <em> 1024 </em> 1024) {
throw new Error(<code>请求体超限：${byteLength} 字节（限制 1.5MB）</code>);
}</p><p>await fetch("/api/save", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: jsonStr
});
</p>

处理 FormData 的大小估算技巧

FormData 没有 .size，但可分项累加：

字符串值：用 new TextEncoder().encode(value).length；
File/Blob：直接用 file.size；
注意：实际 HTTP 请求因 boundary 和编码会产生额外开销（通常 +1–2KB），建议预留 5–10% 余量；
若含大量小文件，可先汇总再判断，避免逐个 await（FileReader 不必要）。

简化估算函数示例：

function estimateFormDataSize(formData) {
  let total = 0;
  for (const [key, value] of formData.entries()) {
    if (value instanceof File || value instanceof Blob) {
      total += value.size;
    } else if (typeof value === "string") {
      total += new TextEncoder().encode(value).length;
    }
  }
  return total + 2048; // +2KB 估算 boundary 开销
}