早期我们依赖 XMLHttpRequest 对象（即我们熟知的 Ajax）来实现客户端与服务器之间的数据交换。然而，随着 Web 技术的发展，浏览器提供了更加优雅、简洁的方案来替代传统的 Ajax。

传统 Ajax 的繁琐

首先，让我们回顾一下传统 Ajax 的实现方式：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    } else {
      console.error('请求失败，状态码：', xhr.status);
    }
  }
};
xhr.onerror = function() {
 console.error('请求出错');
};
xhr.send();

这段代码不仅冗长，还需要处理各种状态码和事件，使得代码结构复杂，可读性较差。

fetch API 的简洁之美

相比之下，使用 fetch API 可以大大简化这一过程：

这段代码使用了 Promise 链式调用的方式，不仅代码量减少了，而且逻辑更加清晰。

fetch API 的主要特点

1. 基于 Promise

fetch API 基于 Promise，这意味着我们可以使用 .then() 和 .catch() 方法来处理异步操作，代码结构更加清晰。更进一步，我们还可以结合 async/await 语法，使异步代码看起来更像同步代码：

2. 简单的请求配置

fetch API 允许通过第二个参数对象来配置请求：

3. 流式处理

fetch API 返回的是一个 Response 对象，它提供了多种处理响应的方法：

• response.json(): 将响应解析为 JSON
• response.text(): 将响应解析为文本
• response.blob(): 将响应解析为 Blob
• response.arrayBuffer(): 将响应解析为 ArrayBuffer
• response.formData(): 将响应解析为 FormData

这使得处理各种类型的响应变得非常灵活。

中断请求

通过 AbortController，fetch API 支持中断正在进行的请求：

此外，相比 Ajax，fetch API 原生支持跨域资源共享（CORS）。

注意事项

尽管 fetch API 有很多优势，但也有一些需要注意的点：

1. fetch 默认不发送 cookies，如果需要发送，需要设置 credentials: 'include' 选项。

   fetch('https://api.example.com/data', {
     credentials: 'include'
   });
   

2. fetch 不会自动拒绝状态码为 4xx 或 5xx 的响应，需要手动检查 
3. fetch 不支持直接设置请求超时，需要结合 AbortController 和 setTimeout 实现。

fetch API 凭借其简洁的语法和强大的功能，已经成为现代 Web 开发中进行网络请求的首选方式。它不仅解决了传统 Ajax 的繁琐问题，还提供了更多的功能和更好的灵活性。

​

阅读原文：https://mp.weixin.qq.com/s/Ua86WJLa8FBQSk4Po60r9w