AJAX 与 Fetch API 有什么区别？

AJAX（Asynchronous JavaScript and XML）和Fetch API都是用于在浏览器中发起网络请求的技术，但它们之间存在一些关键的区别：

1. 基于的规范

• AJAX：基于XMLHttpRequest对象，这是一个较老的Web API。
• Fetch API：基于最新的JavaScript标准，提供了一个更现代和更强大的方式来进行网络请求。

2. 语法和易用性

• AJAX：使用XMLHttpRequest对象，其API较为复杂，需要手动处理请求和响应。
• Fetch API：提供了一个更简洁和强大的接口，使用fetch()函数，基于Promise，使得异步操作更加方便。

3. Promises

• AJAX：不支持原生的Promises，需要手动处理异步操作。
• Fetch API：原生支持Promises，使得异步操作更加简洁和易于管理。

4. 错误处理

• AJAX：错误处理较为复杂，需要检查xhr.status和xhr.statusText。
• Fetch API：任何网络错误（如断网）都会拒绝（reject）Promise，而HTTP错误状态（如404或500）则被视为成功的响应（resolved），需要额外检查response.ok属性。

5. 跨域请求（CORS）

• AJAX：需要手动设置withCredentials属性来支持跨域请求。
• Fetch API：默认支持跨域请求，但同样需要服务器设置正确的CORS头部。

6. 流和迭代

• AJAX：不支持流式传输，必须等待整个响应被接收后才能处理数据。
• Fetch API：支持流式传输，可以逐块处理响应数据，这对于大文件或数据流非常有用。

7. 配置和自定义

• AJAX：可以通过XMLHttpRequest对象的多个方法和属性来配置请求。
• Fetch API：提供了一个更灵活的接口，可以通过init参数来配置请求方法、头部、模式等。

8. 兼容性

• AJAX：几乎所有现代浏览器都支持XMLHttpRequest对象。
• Fetch API：较新的浏览器支持Fetch API，但旧浏览器可能需要polyfill。

9. 弃用和未来

• AJAX：随着Fetch API的普及，XMLHttpRequest的使用可能会逐渐减少。
• Fetch API：被视为未来网络请求的标准方式，得到了广泛的支持和推荐。

示例代码对比

AJAX：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-endpoint', true);
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};
xhr.onerror = function () {
  console.error("请求失败");
};
xhr.send();

Fetch API：

fetch('your-endpoint')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));