javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

AJAX, Fetch 和 Axios 都是用于在浏览器中执行异步 HTTP 请求的工具，但它们有各自的特点和用途。

1. XMLHttpRequest：

   XMLHttpRequest 是最早的浏览器端 JavaScript 异步请求解决方案。它是底层的 API，功能较为基本，且用法较为复杂。

var xhr = new XMLHttpRequest();
xhr.open("GET", "url", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

2. Fetch API：

   Fetch API 是现代的、基于 Promise 的 API，用于发起网络请求并处理响应结果。它的语法比 XMLHttpRequest 更简洁，并且支持 Promise。

fetch('url')
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(error => console.error('Error:', error));

3. Axios：

   Axios 是基于 Promise 的 HTTP 库，它不仅在浏览器中可用，也可在 node.js 中使用。它与 Fetch 类似，但在 node.js 中它会使用原生的 http 模块，而 fetch 使用的是 node-fetch 模块。Axios 也提供了一些 Fetch 不具备的特性，如可以被 cancel，可以配置超时等。

axios.get('url')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

总结：

• XMLHttpRequest 是最原始的 HTTP 请求工具，Fetch 是现代的替代品，Axios 是基于 Fetch 的另一种选择，它在 node.js 环境下也有良好的表现。
• Fetch 和 Axios 都支持 Promise，使得异步处理更加便捷。
• Axios 支持浏览器和 node.js 环境，Fetch 只适用于浏览器环境，如果需要在 node 环境使用类似功能，需要结合 node-fetch 或其他库。
• Axios 可以通过 axios.create 方法创建带有默认配置的实例，而 Fetch 需要手动为每个请求设置默认选项。
• Axios 可以在请求被处理时进行拦截，例如请求转发或认证，而 Fetch 的时机相对较晚，需要通过其他方式实现。
• Axios 在浏览器中发送请求时不需要任何额外的 polyfill，而 Fetch 需要根据浏览器的兼容性来决定是否加载 polyfill。