1. 基本概念与工作原理
什么是 Fetch API
在前端开发中，Fetch API 提供了一个基于 Promise 的网络请求接口，用于替代传统的 XMLHttpRequest。浏览器全局对象 fetch 支持发起请求并得到一个 Promise，从而让异步流程更加直观。通过对 JavaScript Fetch API 全面解析：从基础用法到实战技巧的学习，可以快速理解从发起请求到获取响应的完整链路。
与回调风格相比，Fetch API 将请求和响应看作两个阶段，返回的 Response 对象提供多种解析入口，如 response.json()、response.text()，以及对二进制数据的处理。你还可以通过 headers、mode、cache 等选项来定制请求行为，从而更好地适配不同场景。
Promise 与异步请求的关系
使用 fetch 的核心在于它返回一个 Promise，当网络请求完成后进入已解决或已拒绝的状态，随后可以通过 then、catch 等方法进行链式处理。结合 async/await，你可以将异步流程写成接近同步代码的风格，提升可读性。
在实际应用中，合理的错误处理和状态管理尤为关键，非2xx状态码并不自动抛错，需要显式判断 response.ok，并对 UI 做出相应的提示或重试策略。
2. 基础用法与示例
GET 请求的基础
最常见的场景是发送一个简单的 GET 请求并获取 JSON 数据。下面的示例展示了如何发起请求、解析 JSON、并对错误进行捕获：
async function fetchData(url) {try {const response = await fetch(url);if (!response.ok) {// 处理非 OK 状态，例如 404、500throw new Error(`请求失败，状态码: ${response.status}`);}const data = await response.json();return data;} catch (err) {console.error('网络请求出错：', err);throw err;}
}// 调用示例
fetchData('https://api.example.com/items').then(items => console.log(items)).catch(err => console.error(err));
在上述流程中，response.ok 用于快速判断响应状态，response.json() 进行结构化数据解析，try/catch 实现完善的错误捕获。通过这样的基础用法，你已经掌握了 Fetch 的核心逻辑。
如果你希望同时展示加载状态，可以在 UI 中引入 loading 的状态标记，并在获取数据前后切换。通过这样的模式，用户可以获得更顺畅的交互体验。
POST 请求与请求体处理
除了 GET，POST 请求在提交数据（如表单、JSON）时更常用。下面的示例演示了如何发送一个带 JSON 体的请求，并设置合适的头部信息：
async function postData(url, payload) {const res = await fetch(url, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(payload)});if (!res.ok) {throw new Error(`请求失败，状态码: ${res.status}`);}return res.json();
}// 调用示例
postData('https://api.example.com/items', { name: '新条目', count: 1 }).then(data => console.log(data)).catch(err => console.error(err));
在 POST 请求中，Content-Type 指定为 application/json，并通过 JSON.stringify 将对象序列化为字符串。你也可以使用 FormData 发送表单数据，或者结合 Blob、ArrayBuffer 处理二进制数据。
对于需要对多媒体数据、文件上传等场景，FormData 与二进制处理能力变得尤为重要，确保在前端进行正确的编码与边界设置。
3. 进阶技巧与错误处理
错误处理与重试策略
在真实网络环境中，网络波动和服务器压力会导致请求失败。一个稳健的策略是结合 catch 与重试机制来提升鲁棒性，且要避免对服务器造成过大压力。
async function fetchWithRetry(url, options = {}, retries = 3) {try {const res = await fetch(url, options);if (!res.ok) throw new Error(`状态码 ${res.status}`);return res;} catch (err) {if (retries > 0) {// 简单退避策略await new Promise(r => setTimeout(r, 300 * (4 - retries)));return fetchWithRetry(url, options, retries - 1);}throw err;}
}
在实现时，可以通过 retries 次数控制重试次数，结合 指数退避、jitter 以降低重试对服务的冲击。对幂等性请求（如 GET）尤其安全，POST 等非幂等请求需要更谨慎的重试策略。
同时，边界条件如 AbortController 结合取消能力，也是错误处理的一部分。通过中断无用请求，可以提升应用的响应性与资源利用。
超时控制与 AbortController
标准的 Fetch API 并不直接提供超时选项，因此需要手动实现，通过 AbortController 可以对请求设置超时或取消操作。官方实践通常是在请求前创建控制器并将其信号传入 fetch，超时后触发中止。
function fetchWithTimeout(url, options = {}, timeout = 8000) {const controller = new AbortController();const id = setTimeout(() => controller.abort(), timeout);const finalOptions = { ...options, signal: controller.signal };return fetch(url, finalOptions).then(res => {clearTimeout(id);return res;}).catch(err => {clearTimeout(id);if (err.name === 'AbortError') {throw new Error('请求超时已中止');}throw err;});
}
通过这种模式，你可以在 UI 上显示“请求超时”或提供重试入口，提升用户体验。请注意，应对 AbortError 的处理逻辑要与常规错误区分开来，以避免混淆。
4. 流式数据与响应处理
读取流与进度
Fetch API 支持 ReadableStream 级别的流式处理，允许你逐步读取响应体，适合大文件下载、实时数据流等场景。通过 response.body 可以获取流对象，并结合 ReadableStreamDefaultReader 逐步消费。需要注意的是流处理通常需要较新的浏览器实现。
一个常见的模式是读取块并更新下载进度：你可以在每次读取到数据块后计算已下载的字节数占总长度的比例，从而在 UI 上显示进度条。
响应解析与内容类型
Fetch 的 Response 对象提供多种解析入口，常见的包括 response.json()、response.text()、response.blob()，以及 response.arrayBuffer()。选择正确的解析入口有助于减少内存占用并提升性能。
在处理跨域请求时，确保服务器返回合理的 Access-Control-Allow-Origin，并关注 Content-Type 头部以决定合适的解析通道。例如，对 application/json，使用 response.json()，对二进制数据则考虑 response.blob()。
5. 并发与性能优化
并发请求的并行化
在需要同时请求多个资源时，Promise.all 提供了一个简洁的并行化解决方案。通过并发执行，可以显著缩短总耗时，但要注意并发数的上限以及错误传播行为。
async function loadAll(urls) {const requests = urls.map(u => fetch(u).then(res => res.ok ? res.json() : Promise.reject(res.status)));const results = await Promise.all(requests);return results;
}
使用 Promise.allSettled 也可以在某些场景下更稳妥地处理个别请求失败的情况，避免整个并发批次因一个失败就中断。
同时，合理设置并发上限（如使用分批并发、节流机制）可以避免服务器压力过大，提升整体稳定性和缓存命中率。
缓存策略与离线能力
正确的缓存策略能显著提升性能与离线能力。通过对 fetch 的 cache 选项进行配置（如 no-store、reload、default 等），以及结合 Cache API 实现离线缓存，可以降低重复请求的成本。
在 PWA 场景中，结合 Service Worker 的拦截与缓存，可以实现更强的离线体验。注意缓存的版本控制与过期策略，以确保数据的时效性与一致性。
6. 与后端和前端生态整合
与认证头部与安全
在需要认证的接口中，Authorization 等请求头是必需的。典型做法是在 fetch 的 headers 中注入令牌，例如 Bearer 令牌，同时要注意 CSRF、CORS 与票据轮换策略。
async function fetchWithAuth(url, token, options = {}) {const res = await fetch(url, {...options,headers: {'Authorization': `Bearer ${token}`,...(options.headers || {})}});if (!res.ok) throw new Error(`请求失败，状态码: ${res.status}`);return res.json();
}
在后端，确保正确实施对令牌的校验和有效期管理，同时客户端应对令牌刷新进行安全实现，避免敏感信息暴露。
与 GraphQL/REST 的对比与结合
Fetch API 同时适用于 REST 风格和 GraphQL 的网络请求。对于 REST，直接使用 GET/POST 的标准 HTTP 方法即可；对于 GraphQL，常见做法是发送一个单独的 POST 请求，携带查询语句与可选的变量参数，例如：
async function graphqlQuery(query, variables = {}) {const res = await fetch('/graphql', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ query, variables })});if (!res.ok) throw new Error(`GraphQL 请求失败: ${res.status}`);return res.json();
}
通过这样的整合，可以在前端保持统一的请求风格，同时根据后端的架构需求灵活切换。为了提升用户体验，结合 cache 与 prefetch 策略，能够在初次加载后迅速显示内容。
总结来说，JavaScript Fetch API 全面解析：从基础用法到实战技巧覆盖了从基础请求、错误处理、超时控制、流式数据，到并发与缓存，以及与后端生态的深度整合。通过上述示例与策略的组合使用，你可以在实际项目中实现高效、可维护且稳健的网络请求方案。
