正文

掌握JavaScript终止请求的5种实用方法

/0 浏览量
0529

在开发过程中，我们经常需要向服务器发送异步请求，比如使用 XMLHttpRequest 或 fetch API。但是，有时候我们需要取消这些请求，例如，用户关闭了浏览器窗口或者操作导致请求不再需要。以下是一些在JavaScript中终止请求的实用方法：

1. 使用 XMLHttpRequest 的 abort 方法

XMLHttpRequest 对象提供了一个 abort 方法，可以用来取消请求。以下是一个使用 XMLHttpRequest 的例子：

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

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log('请求成功:', xhr.responseText);
    } else {
      console.error('请求失败:', xhr.statusText);
    }
  }
};

// 在某个时刻取消请求
xhr.abort();

2. 使用 fetch API 的返回值

fetch API 返回一个 Promise，你可以使用这个 Promise 来取消请求。以下是一个例子：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.text();
  })
  .then(data => console.log('请求成功:', data))
  .catch(error => console.error('请求失败:', error));

// 使用AbortController取消请求
const controller = new AbortController();
const { signal } = controller;

fetch('https://api.example.com/data', { signal })
  .then(response => response.text())
  .then(data => console.log('请求成功:', data))
  .catch(error => console.error('请求失败:', error));

// 当需要取消请求时
controller.abort();

3. 通过定时器取消 XMLHttpRequest

如果你知道请求应该在多久之后取消，你可以设置一个定时器来调用 abort 方法：

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

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log('请求完成');
  }
};

// 设置一个定时器，5秒后取消请求
setTimeout(function() {
  xhr.abort();
}, 5000);

xhr.send();

4. 使用 Promise.race 和 AbortController

你可以使用 Promise.race 来创建一个竞赛，其中包含一个取消的 Promise 和实际的请求 Promise。如果达到特定的时间限制，竞赛将取消请求：

function fetchWithTimeout(resource, options) {
  const { timeout = 8000 } = options;

  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);

  const fetchPromise = fetch(resource, {
    ...options,
    signal: controller.signal
  }).then(response => {
    clearTimeout(id);
    return response;
  });

  return Promise.race([fetchPromise, controllerPromise]);
}

// 使用示例
fetchWithTimeout('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log('请求成功:', data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求因超时被取消');
    } else {
      console.error('请求失败:', error);
    }
  });

5. 监听 window 对象的 beforeunload 事件

如果你希望当用户尝试关闭浏览器窗口时取消所有未完成的请求，可以监听 window 对象的 beforeunload 事件：

window.addEventListener('beforeunload', function(event) {
  // 假设你有一个正在进行的fetch请求
  if (fetchPromise) {
    fetchPromise.abort();
  }
});

以上方法可以帮助你在JavaScript中有效地终止异步请求，从而提高应用的性能和用户体验。记住，根据你的具体情况选择合适的方法来实现请求的取消。

-- 展开阅读全文 --