Fetch 和 ajax 之间有什么区别？

fetch 和 ajax（通常指的是使用 XMLHttpRequest 的异步请求）是在Web开发中用于在客户端与服务器间进行数据交换的两种技术。虽然它们都能够执行异步HTTP请求，但在使用和功能上有一些关键差异：

fetch

• 现代标准：fetch 是一个现代的、基于Promise的API，很好地融入了现代JavaScript的异步特性（例如async/await）。
• 简洁的API：使用起来通常更为简洁，因为它基于Promises，可以避免回调函数的嵌套。
• 无需额外库：不需要像jQuery那样的额外库就能运行。
• 默认不发送cookies：出于安全原因，默认不会发送或接收cookies，除非你明确指定credentials选项。
• Streams接口：支持Streams API，可以让你在数据到达时就开始处理，而无需等待全部数据到达。
• 更好的控制：提供了更细粒度的控制请求和响应（例如，可以控制请求的redirect模式）。

ajax (XMLHttpRequest)

• 早期标准：XMLHttpRequest 是较早的技术，与Promise不兼容，依赖于回调函数。
• 广泛兼容：由于它的历史更久，因此在老旧的浏览器上也有很好的支持。
• 配置复杂：相较于 fetch，它的API相对复杂，需要更多的代码来处理等效的操作。
• 默认发送cookies：默认会发送同源请求的cookies。
• 没有Streams接口：不支持Streams API，必须等待所有数据传输完成后才能开始处理。
• 状态和事件：使用时可以通过监听不同的事件和检查状态码来处理请求和响应。

在这里是一个简单的比较示例：

fetch 使用示例:

javascript
fetch('http://example.com/data', { method: 'GET' })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

XMLHttpRequest 使用示例:

javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText));
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.onerror = function () {
  console.error(xhr.statusText);
};

xhr.send(null);

尽管 XMLHttpRequest 仍然可以在所有浏览器上工作，但 fetch 正因其简洁和现代的特性而成为许多开发者的首选API。