javascript如何发送HTTP请求_如何使用fetch API？_技术教程

fetch需用.then()或await处理Promise；404/500不触发catch，须检查response.ok；GET中文URL要encodeURIComponent；POST需设headers和JSON.stringify(body)；取消请求用AbortController；IE不支持fetch，需polyfill或换axios。

fetch 基本用法：GET 请求怎么写才不报错

直接调用 fetch() 不

会自动等待响应，它返回的是一个 Promise，必须用 .then() 或 await 处理；否则你会拿到一个 pending 状态的 Promise，控制台看不到数据，也容易误以为“没发出去”。
HTTP 状态码如 404、500 不会触发 catch，除非网络失败——这是最常踩的坑。

fetch() 默认只拒绝网络错误（如 DNS 失败、断网），2xx 以外的状态码仍算“成功”
必须手动检查 response.ok 或 response.status 才能捕获业务错误
GET 请求无需额外配置，但 URL 中中文或特殊字符要先用 encodeURIComponent() 编码

const url = 'https://api.example.com/users?id=' + encodeURIComponent('张三');
fetch(url)
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

POST 请求传 JSON 数据：headers 和 body 怎么配

发送 JSON 必须同时设置两个关键项：Content-Type: application/json 和把对象转成字符串。漏掉任一都会导致后端收不到数据或解析失败，常见错误是后端日志里看到空 body 或 400 Bad Request。

headers 要显式传入对象，不能写在 URL 后面或用字符串拼接
body 必须是字符串，JSON.stringify() 不可省略
如果后端要求带 token，Authorization 也要放在 headers 里，不是 query 参数

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer abc123'
  },
  body: JSON.stringify({ username: 'admin', password: '123' })
})
.then(r => r.json())
.then(console.log);

如何取消 fetch 请求：AbortController 是唯一可靠方式

原生 fetch() 没有内置的 cancel() 方法，也不能像 XMLHttpRequest 那样调 .abort()。想中止进行中的请求，必须用 AbortController，否则用户切换页面或输入框快速连打时，旧请求还在后台跑，可能覆盖新结果或浪费资源。

每个请求需新建一个 AbortController 实例，复用会导致意外中止其他请求
把 controller.signal 传给 fetch() 的 signal 选项
调用 controller.abort() 后，Promise 会以 AbortError 拒绝，需在 catch 中识别

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

fetch('/data', { signal: controller.signal })
  .then(r => r.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已取消');
    } else {
      console.error(err);
    }
  });

兼容性与 polyfill：IE 完全不支持，别硬扛

fetch 在 IE 中完全不可用，哪怕加了 Promise polyfill 也没用。Safari 10.1+、Chrome 42+、Firefox 39+ 才原生支持。如果项目还需兼容 IE，不要尝试魔改 fetch，直接换方案更省事。

用 axios 或 node-fetch（服务端）替代，它们内部自动处理兼容逻辑
若坚持用原生 API，必须引入 whatwg-fetch polyfill，且要在所有业务代码前加载
注意 AbortController 在 Safari 12.1 以下也不支持，polyfill 需额外引入 abortcontroller-polyfill

复杂点在于：不同环境（浏览器 / Node / 测试框架）对 fetch 的实现细节有差异，比如重定向策略、cookie 默认行为、超时处理——这些没法靠一个 polyfill 统一补全。