Ajax 是否支持取消请求

Question

xhr.abort() 方法用于中止当前的请求。调用该方法会导致 XHR 对象触发 abort 事件，且触发 readystatechange 事件的处理函数，xhr.readyState 的值将变为 0。

下面是一个示例代码，展示了如何使用标志位实现取消请求的效果：

let isRequestCanceled = false;

function sendGetRequest(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && !isRequestCanceled) {
      if (xhr.status === 200) {
        // 请求成功
        const response = JSON.parse(xhr.responseText);
        callback(null, response);
      } else {
        // 请求失败
        const error = new Error(`Request failed with status ${xhr.status}`);
        callback(error, null);
      }
    }
  };

  xhr.send();

  // 取消请求
  function cancelRequest() {
    if (xhr.readyState !== XMLHttpRequest.DONE) {
      xhr.abort();
      isRequestCanceled = true;
      callback(new Error('Request canceled'), null);
    }
  }

  // 返回取消请求的函数
  return cancelRequest;
}

// 使用示例
const apiUrl = 'https://api.example.com/data';
const cancelRequest = sendGetRequest(apiUrl, (error, response) => {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Response:', response);
  }
});

// 取消请求
cancelRequest();

在上述示例代码中，添加了一个 cancelRequest 函数用于取消请求。该函数会在请求发送后立即返回，并中止请求的发送。同时，将标志位 isRequestCanceled 设为 true，并通过回调函数返回一个错误对象，表示请求被取消。

需要注意的是，虽然通过标志位模拟了请求的取消，但实际上请求已经发送到服务器并得到了响应。只是在客户端这边忽略了响应结果。在真实的网络请求中，服务器仍然会继续处理请求并返回响应，但客户端会忽略该响应。

取消 ajax 请求的意义

• 已发出的请求可能仍然会到达后端
• 取消后续的回调处理，避免多余的回调处理，以及特殊情况，先发出的后返回，导致回调中的数据错误覆盖
• 取消 loading 效果，以及该请求的其他交互效果，特别是在单页应用中，A 页面跳转到 B 页面之后，A 页面的请求应该取消，否则回调中的一些处理可能影响 B 页面
• 超时处理，错误处理等都省去了，节约资源