xhr、ajax、axois、fetch的区别

一、XMLHttpRequest (XHR)、AJAX、Axios 和 Fetch API 都是用于在不重新加载整个页面的情况下与服务器进行通信的技术和库。它们在处理超时、终止请求、进度反馈等机制上有一些显著的差异。以下是它们的详细比较：

1. XMLHttpRequest (XHR)

XMLHttpRequest 是一种浏览器内置的对象，用于与服务器进行交互。它可以发送和接收各种格式的数据，包括 JSON、XML、HTML 和纯文本。

特点

• 原生 JavaScript 对象，无需额外引入库。
• 支持同步和异步请求。
• 语法较为复杂，需要手动处理回调和状态变化。
• 支持超时设置、终止请求和进度事件。

示例

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

// 设置超时
xhr.timeout = 5000; // 5秒

// 处理超时
xhr.ontimeout = function () {
  console.error('Request timed out');
};

// 处理进度事件
xhr.onprogress = function (event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`Progress: ${percentComplete}%`);
  }
};

// 处理请求完成
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};

// 终止请求
const abortButton = document.getElementById('abortButton');
abortButton.addEventListener('click', function () {
  xhr.abort();
  console.log('Request aborted');
});

xhr.send();

2. AJAX (使用 jQuery)

AJAX（Asynchronous JavaScript and XML）是一种使用多种技术（包括 XMLHttpRequest）来创建异步 Web 应用程序的方法。它允许网页在后台与服务器进行通信，从而实现动态更新页面内容，而无需重新加载整个页面。

特点

• 通常使用 XMLHttpRequest 或 Fetch API 实现。
• 可以与各种 JavaScript 库（如 jQuery）结合使用，简化请求处理。
• jQuery 的 ajax 方法支持超时设置、终止请求和进度事件。

示例（使用 jQuery）

const xhr = $.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  timeout: 5000, // 5秒
  xhr: function () {
    const xhr = new window.XMLHttpRequest();
    // 处理进度事件
    xhr.onprogress = function (event) {
      if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log(`Progress: ${percentComplete}%`);
      }
    };
    return xhr;
  },
  success: function (data) {
    console.log(data);
  },
  error: function (error) {
    if (error.statusText === 'timeout') {
      console.error('Request timed out');
    } else {
      console.error(error);
    }
  }
});

// 终止请求
const abortButton = document.getElementById('abortButton');
abortButton.addEventListener('click', function () {
  xhr.abort();
  console.log('Request aborted');
});

3. Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了更简洁的 API 和更强大的功能，简化了 HTTP 请求的处理。

特点

• 基于 Promise，支持异步操作。
• 支持请求和响应拦截器。
• 自动转换 JSON 数据。
• 支持取消请求。
• 更简洁的语法和更好的错误处理。
• 支持超时设置和进度事件（通过配置选项）。

示例

const CancelToken = axios.CancelToken;
let cancel;

// 发送请求
axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  }),
  timeout: 5000, // 5秒
  onDownloadProgress: function (progressEvent) {
    if (progressEvent.lengthComputable) {
      const percentComplete = (progressEvent.loaded / progressEvent.total) * 100;
      console.log(`Progress: ${percentComplete}%`);
    }
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else if (error.code === 'ECONNABORTED') {
    console.error('Request timed out');
  } else {
    console.error('Fetch error:', error);
  }
});

// 终止请求
const abortButton = document.getElementById('abortButton');
abortButton.addEventListener('click', function () {
  cancel('Request canceled by the user.');
});

4. Fetch API

Fetch API 是一种现代的、基于 Promise 的方式来进行网络请求。它提供了更简洁的 API 和更强大的功能，简化了 HTTP 请求的处理。

特点

• 基于 Promise，支持异步操作。
• 语法更简洁，易于阅读和维护。
• 默认不发送 cookies，需要手动配置。
• 更好的错误处理机制。
• 支持流式处理响应。
• 现代浏览器支持较好，但在一些旧浏览器中需要使用 polyfill。
• 不直接支持超时和进度事件，需要手动实现。

示例

const controller = new AbortController();
const signal = controller.signal;

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

// 终止请求
const abortButton = document.getElementById('abortButton');
abortButton.addEventListener('click', function () {
  controller.abort();
});

二、比较

特性	XMLHttpRequest (XHR)	AJAX (使用 jQuery)	Axios	Fetch API
基于	原生 JavaScript	XMLHttpRequest	Promise	Promise
语法简洁性	较复杂	较简洁	非常简洁	非常简洁
异步支持	是	是	是	是
JSON 自动转换	否	否	是	是
请求/响应拦截器	否	否	是	否（需要手动实现）
取消请求	是	是	是	是（通过 AbortController）
进度事件	是	是	是（通过配置选项）	否（需要手动实现）
超时机制	是	是	是	否（需要手动实现）
浏览器兼容性	所有现代浏览器	所有现代浏览器	所有现代浏览器和 Node.js	现代浏览器（旧浏览器需 polyfill）

三、总结

• XMLHttpRequest (XHR)：较旧的技术，支持广泛，但语法较为复杂，支持超时设置、终止请求和进度事件。
• AJAX：通常指的是使用 XMLHttpRequest 或其他技术来实现异步通信的整体方法，常与 jQuery 等库结合使用，支持超时设置、终止请求和进度事件。
• Axios：现代的 HTTP 客户端，基于 Promise，提供了更简洁的语法和更强大的功能，支持请求和响应拦截器、取消请求、超时设置和进度事件（通过配置选项）。
• Fetch API：现代的 HTTP 请求方式，基于 Promise，语法简洁，错误处理更好，但不直接支持超时和进度事件，需要手动实现。

选择哪种技术取决于你的项目需求和浏览器支持情况。对于现代 Web 开发，Axios 和 Fetch API 通常是首选，但在需要兼容旧浏览器的情况下，AJAX 仍然是一个有效的选择。