Fetch API 是现代浏览器发起网络请求的标准方式，相比 XMLHttpRequest 更简洁强大，基于 Promise 支持 async/await，但需手动处理状态码异常和响应解析，且不支持超时、上传进度监听等，IE 不兼容。
Fetch API 是现代浏览器中发起网络请求的标准方式，相比传统 Ajax（即 XMLHttpRequest），它更简洁、更强大，也更符合 JavaScript 的异步编程习惯。它不是“比 Ajax 好一点”，而是设计哲学和使用体验上的全面升级。
用 Fetch 发起请求很简单
最基本的 GET 请求只需一行代码：
fetch('https://api.example.com/data')
但要注意：Fetch 默认只返回一个 Promise，它**不会自动解析响应体**，也不会在 HTTP 状态码异常（比如 404、500）时自动 reject —— 这是初学者最容易踩的坑。
推荐写法（带错误处理和 JSON 解析）：
- 先检查
response.ok判断状态码是否在 200–299 范围 - 再调用
response.json()获取数据（也可用.text()、.blob()等） - 用
try/catch或.catch()捕获网络失败（如断网、跨域拒绝）
示例：
async function getData() {<br> try {<br> const res = await fetch('/api/users');<br> if (!res.ok) throw new Error(`HTTP ${res.status}`);<br> return await res.json();<br> } catch (err) {<br> console.error('请求失败:', err);<br> }<br>}
Fetch 比传统 Ajax 更清晰的几处关键改进
- 基于 Promise，天然支持 async/await：不用嵌套回调，避免“回调地狱”，逻辑更线性可读
- 分离关注点更明确：Request 和 Response 是独立对象，可复用、可定制（比如设置 headers、credentials、cache 策略）
-
内置对流式响应的支持：通过
response.body.getReader()可逐步读取大文件或实时数据（如 SSE） - 更合理的错误边界：网络错误（如 DNS 失败、连接中断）会 reject；而 4xx/5xx 状态码仍算“成功响应”，由你决定是否视为业务错误
Fetch 不是万能的——它也有局限
它不直接支持以下功能，需要手动补充：
-
超时控制：Fetch 本身没有 timeout 选项，需配合
AbortController实现 -
上传进度监听：不像
XMLHttpRequest.upload.onprogress那样原生支持，需借助ReadableStream或第三方库 -
Cookie 默认不携带：需显式设置
{ credentials: 'include' }才发送 Cookie - IE 浏览器完全不支持：如需兼容 IE，必须使用 polyfill（如 whatwg-fetch）或回退到 XMLHttpRequest
什么时候该选 Fetch，什么时候还用 Ajax
新项目、主流浏览器环境、追求可维护性 → 优先用 Fetch。
需要精细控制上传进度、强兼容 IE、或已有大量 XMLHttpRequest 封装 → 继续用 Ajax 也完全合理。
两者本质都是浏览器提供的底层能力，Fetch 是更现代的封装，不是对 Ajax 的“取代”，而是演进。
