JavaScript 怎么使用 Fetch API 发送现代化的网络请求-js教程-PHP中文网

fetch api 是现代替代 xmlhttprequest 的标准化方案，需手动检查 response.ok 处理 http 错误、显式设置 credentials 传递 cookie、用 abortcontroller 实现超时与取消，所有行为均显式化。

javascript 怎么使用 fetch api 发送现代化的网络请求

JavaScript 使用 fetch() 发送网络请求，比传统的 XMLHttpRequest 更简洁、更基于 Promise，是当前主流的现代化方式。它原生支持，无需额外库，但默认不带 Cookie、错误状态（如 404、500）也不会自动 reject，这些细节需要手动处理。

基础用法：GET 请求最简写法

发起一个基本的 GET 请求只需一行代码，返回的是 Promise：

fetch('https://api.example.com/data') 返回 Promise
必须用 .then(response => response.json()) 解析 JSON（或 .text()、.blob() 等）
注意：response.ok 判断是否为 2xx 状态；response.status 获取具体状态码

发送 POST 请求并提交 JSON 数据

POST 需要显式设置 method、headers 和 body：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

body 必须是字符串，通常用 JSON.stringify() 转换对象
记得设置 'Content-Type': 'application/json'
示例：

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'alice', password: '123' })
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));

携带 Cookie 和认证信息

默认 fetch 不发送 Cookie，也不接受跨域 Cookie。需主动配置：

同域请求加 credentials: 'same-origin' 可发 Cookie
跨域请求用 credentials: 'include'（后端需允许 Access-Control-Allow-Credentials: true）
Token 认证通常放在 Authorization header 中，例如：'Authorization': 'Bearer xxx'

处理错误和超时的实用技巧

fetch 只在网络故障时 reject，HTTP 错误码（4xx/5xx）仍算“成功”。建议统一包装：

检查 response.ok 并手动 throw 错误，便于 catch
超时需自行实现，例如用 AbortController：

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

fetch('/data', { signal: controller.signal })
  .catch(err => {
    if (err.name === 'AbortError') console.log('请求超时');
  });