javascript怎样发送网络请求_fetch API如何使用【教程】

fetch 发 GET 请求需 await fetch() 后调用 await res.json()；POST 要匹配 body 与 Content-Type；超时/取消需 AbortController；跨域问题源于预检失败或 CORS 响应头缺失。

fetch 基本用法：发个 GET 请求别漏掉 await 和 .json()

fetch 默认不自动解析响应体，直接 await fetch(url) 拿到的是一个 Response 对象，不是 JSON 数据。常见错误是忘了调用 .json() 或 .text()，结果打印出来是 [object Promise] 或控制台报错 TypeError: Failed to execute 'json' on 'Response': body stream is locked。

正确写法示例：

async function getData() {
  const res = await fetch('/api/user');
  if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
  const data = await res.json(); // 必须 await 这一步
  r
eturn data;
}

• fetch() 返回 Promise，必须用 await 或 .then() 处理
• res.ok 判断 HTTP 状态是否在 200–299 范围，404、500 不会自动 reject
• .json() 本身也返回 Promise，不能省略 await
• 如果后端返回的是纯文本或 HTML，改用 res.text()；二进制用 res.arrayBuffer()

POST 请求怎么传数据？body 和 headers 别配错

fetch 发 POST 时，Content-Type 和 body 格式必须匹配，否则后端收不到字段。最常踩的坑是：传了 JSON.stringify(obj) 却没设 headers: {'Content-Type': 'application/json'}，或者反过来，用 FormData 却写了 application/json。

常见组合：

// JSON 数据（推荐 API 场景）
fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'a@b.c', password: '123' })
});

// 表单数据（上传文件或兼容传统后端）
const form = new FormData();
form.append('file', fileInput.files[0]);
fetch('/upload', {
  method: 'POST',
  body: form // 此时不要设 Content-Type，浏览器会自动生成带 boundary 的 multipart
});

• FormData 实例直接当 body，不要手动设 Content-Type，否则会破坏 boundary
• JSON.stringify() 后的字符串是 string 类型，不是对象，别漏掉这步
• GET 请求不能有 body，参数只能拼在 URL 后或用 URLSearchParams

fetch 无法 abort 或 timeout？得靠 AbortController

fetch 本身不支持超时或手动取消，长时间 pending 会卡住 UI。原生方案是用 AbortController，但要注意：它只中断网络请求，不会自动清理 Promise，且 abort() 后再 await 会抛 AbortError。

function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);

  return fetch(url, { signal: controller.signal })
    .finally(() => clearTimeout(id));
}

// 使用
fetchWithTimeout('/slow-api')
  .then(r => r.json())
  .catch(err => {
    if (err.name === 'AbortError') console.log('请求超时');
  });

• signal 选项必须显式传入 fetch 配置，否则无效
• AbortController 是一次性对象，每次请求都要新建实例
• 超时逻辑需自己用 setTimeout + clearTimeout 配合，fetch 无内置 timeout 参数
• 某些旧版 Safari 不支持 AbortController，需检查兼容性或用 polyfill

跨域失败时，浏览器控制台只显示 "Failed to fetch"？先看预检和 CORS 响应头

fetch 遇到跨域且服务端未正确配置 CORS 时，控制台通常只报 TypeError: Failed to fetch，没有具体原因。这是因为浏览器在发出实际请求前会先发 OPTIONS 预检，如果预检失败（如缺少 Access-Control-Allow-Origin），整个请求就被拦在网关外，fetch 拿不到任何响应。

排查步骤：

• 打开 DevTools → Network → 找到对应请求 → 查看 Headers 标签页，确认响应头含 Access-Control-Allow-Origin: * 或指定域名
• 如果有自定义 header（如 Authorization）或非简单方法（PUT、DELETE），必须确保服务端同时返回 Access-Control-Allow-Headers 和 Access-Control-Allow-Methods
• 前端加 credentials: 'include' 时，后端 Access-Control-Allow-Origin 不能为 *，必须写明确域名
• 本地开发常用代理绕过 CORS（如 Vite 的 server.proxy 或 Webpack 的 devServer.proxy），而非在代码里硬加 mode: 'no-cors'（它禁用 JS 读响应，基本没用）

fetch 的行为很“干净”，但也因此把很多底层细节（比如预检、流锁、header 匹配）推给了开发者判断——真正难的不是调用，而是看清请求到底卡在哪一层。

# safari  # 浏览器  # app  # word  # js  # json  # javascript  # java  # String  # html  # 字符串  # access  # signal  # delete  # 前端  # Object  # include  # vite  # webpack 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】