在 JavaScript 中，常见的请求 API 方式主要有三种：XMLHttpRequest、fetch() 和基于 async/await 的现代 API（包括 fetch()）。这三种方法各有优缺点，随着时间的推移，fetch() 和 async/await 的方式逐渐成为主流。

1. XMLHttpRequest（旧的 API）

XMLHttpRequest 是 JavaScript 中最早的用于发起 HTTP 请求的 API。虽然 fetch() 逐渐取代了它，但它仍然在很多旧的项目中被使用。

优点：

• 支持较广泛的浏览器（尤其是旧版浏览器）。

缺点：

• 使用较为繁琐，代码较为冗长，支持异步操作时比较复杂。
• 没有内置的 Promise 支持，难以处理回调地狱（callback hell）。

示例代码：

javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.onerror = function() {
  console.error('请求失败');
};

xhr.send();

2. fetch()（现代 API）

fetch() 是一种更简洁、更现代的用于发起网络请求的方式，基于 Promise，使得处理异步操作变得更加清晰。

优点：

• 更简洁和易用，支持 Promise，使得处理异步代码更加直观。
• 支持多种请求方法（如 GET、POST、PUT、DELETE）和配置项（如请求头、请求体）。
• 内置支持处理 JSON 格式数据和 CORS。

缺点：

• 不会自动处理 HTTP 错误（如 404 或 500），需要手动检查响应的状态。
• 不支持超时，虽然可以通过 AbortController 来处理。

示例代码：

javascript
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();  // 将响应转为 JSON 格式
  })
  .then(data => {
    console.log(data);  // 处理成功的响应数据
  })
  .catch(error => {
    console.error('请求失败:', error);  // 错误处理
  });

3. async/await（基于 fetch() 的现代语法糖）

async/await 是基于 Promise 的语法糖，使得异步代码更接近同步代码的写法，增强了代码的可读性和可维护性。fetch() 与 async/await 结合使用时，能够使代码更加简洁和直观。

优点：

• 语法简洁，代码易于理解和维护。
• 支持处理多个异步操作时的顺序执行，避免回调地狱。

缺点：

• await 只能在 async 函数内部使用，虽然支持链式调用，但不能像 .then() 那样直接对 Promise 链进行操作。

示例代码：

javascript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    
    if (!response.ok) {
      throw new Error('请求失败');
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求错误:', error);
  }
}

fetchData();

4. Axios（第三方库）

Axios 是一个流行的第三方库，简化了基于 Promise 的 HTTP 请求。它提供了比 fetch() 更多的功能，如自动转换响应数据、请求/响应拦截器、取消请求等。

优点：

• 自动处理 JSON 数据。
• 支持请求/响应拦截器，可以在请求发送前或响应返回后对数据进行处理。
• 提供 cancel 功能，可以取消请求。
• 支持浏览器和 Node.js 环境。

缺点：

• 需要引入第三方库，增加了额外的依赖。

示例代码：

javascript
// 使用 Axios 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);  // 处理响应数据
  })
  .catch(error => {
    console.error('请求失败:', error);  // 错误处理
  });

5. jQuery.ajax()（老旧的第三方库）

jQuery 提供了 $.ajax() 方法，虽然现在已经不再推荐使用（因为现代浏览器和 JavaScript 提供了更简洁的原生方法），但它曾经在许多项目中被广泛使用。

优点：

• 简洁的语法，支持回调函数和链式调用。
• 支持多种请求类型和配置选项。

缺点：

• 需要引入 jQuery 库，增加了项目的依赖。
• 对于现代开发，fetch() 和 Axios 等更具现代感和轻量。

示例代码：

javascript
$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  success: function(data) {
    console.log(data);  // 处理响应数据
  },
  error: function(xhr, status, error) {
    console.error('请求失败:', error);  // 错误处理
  }
});

6. 比较总结

特性/方式	XMLHttpRequest	fetch()	Axios	jQuery.ajax()
现代化	否	是	是	否
基于 Promise	否	是	是	是
易用性	较为复杂	简洁	非常简洁	简洁
支持 CORS	否	是	是	是
自动处理 JSON	否	否	是	是
浏览器兼容性	较好	较好	需要引入库	需要引入库
请求拦截器	否	否	是	是

总结

• XMLHttpRequest 是最古老的请求方法，但使用起来较为繁琐，已逐渐被淘汰。
• fetch() 是现代 JavaScript 推荐的原生请求 API，简洁易用，并基于 Promise，但需要手动处理 HTTP 错误。
• async/await 是基于 fetch() 的语法糖，让异步代码更具可读性，推荐与 fetch() 配合使用。
• Axios 是一个第三方库，简化了 HTTP 请求的处理，提供更多功能，如请求拦截器和取消请求，但需要引入额外的依赖。
• jQuery.ajax() 是 jQuery 提供的旧 API，虽然功能强大，但如今通常推荐使用 fetch() 或 Axios。

根据需求选择合适的请求 API，可以使异步编程更加高效和易于维护。