「每日一题」Fetch API 是什么？能代替 AJAX 吗？

Fetch API 是浏览器提供的原生 AJAX 接口，可以替代传统的 AJAX 实现（如 $.ajax、XMLHttpRequest），但需注意其特性和限制。

1. 原生支持

   Fetch 是现代浏览器内置的 API（通过 window.fetch 调用），无需依赖第三方库（如 jQuery）。

   示例对比：

   // jQuery AJAX$.ajax('/').then(response => console.log(response));// Fetch APIfetch('/').then(response => response.text().then(text => console.log(text)));

2. 基于 Promise

   Fetch 的异步操作基于 Promise，代码更简洁，但需熟悉 Promise 的链式调用（如 .then()、.catch()）。

3. 更清晰的接口设计

   Fetch 提供了 Headers、Request、Response 等对象，便于精细控制请求和响应（如设置请求头、解析 JSON 等）。

1. 能否替代 AJAX？

   可以替代：Fetch 实现了 AJAX 的核心功能（异步请求），且语法更现代。

   不能完全替代：

   取消请求：Fetch 的 Promise 无法直接取消，需通过 AbortController 实现（较新浏览器支持）。

   进度监控：Fetch 不支持上传/下载进度跟踪（XMLHttpRequest 可以）。

   兼容性：旧浏览器（如 IE）需引入 polyfill（如 whatwg-fetch）。

2. 代码复杂度

   Fetch 的响应处理需额外步骤（如调用 .json() 或 .text()），而 $.ajax 会自动解析数据。

1. 基本 GET 请求

   fetch('
   https://api.example.com/data'
   ) .then(response => { if (!response.ok) throw new Error('Network error'); return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

2. POST 请求

   fetch('
   https://api.example.com/data'
   , { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })});

3. 取消请求（需 AbortController）

   const controller = new AbortController();fetch('
   https://api.example.com/data'
   , { signal: controller.signal }) .then(response => response.json()) .catch(error => console.log(error));// 取消请求controller.abort();

1. 浏览器支持

   Chrome、Firefox、Edge 等现代浏览器原生支持 Fetch。

   旧浏览器：通过 polyfill（如 whatwg-fetch）或回退到 XMLHttpRequest。

2. Polyfill 示例

   <script src="
   https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.2/dist/fetch.umd.min.js"></script>

• 推荐使用 Fetch：在支持 Promise 和现代浏览器的项目中，Fetch 是更简洁、标准化的选择。
• 需权衡场景：若需取消请求或兼容旧浏览器，可能需要额外处理或结合其他库（如 Axios）。
• 学习建议：掌握 Promise 和 Fetch 的基本用法后，可进一步探索 Headers、Request 等高级功能。

Fetch 的出现简化了 AJAX 的使用，但需注意其局限性。根据项目需求选择合适的工具即可。