xhr、ajax、axois、fetch的区别

原创

已于 2024-12-20 15:07:37 修改 · 3.2k 阅读

44 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #前端 #javascript

于 2024-09-04 19:52:49 首次发布

一、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');
abo