正文

JavaScript终止已发出的请求：详解AbortController与XMLHttpRequest中断技巧

/0 浏览量
0527

在开发中，我们经常需要向服务器发送请求，获取数据。但在某些情况下，例如用户切换操作或者数据不再需要时，我们需要终止已发出的请求。今天，我们就来探讨一下如何在JavaScript中实现这一功能，主要介绍AbortController和XMLHttpRequest中断请求的技巧。

AbortController：现代浏览器的新宠

随着浏览器的发展，AbortController这一新特性应运而生。它允许开发者更容易地终止网络请求。下面，我们就来详细了解一下AbortController的使用方法。

创建AbortController

首先，我们需要创建一个AbortController实例：

const controller = new AbortController();

获取信号

创建实例后，我们可以通过controller.signal获取一个AbortSignal对象，这个对象可以用来终止请求：

const signal = controller.signal;

发送请求

在发送请求时，我们将signal作为参数传递给fetch函数：

fetch('https://api.example.com/data', { signal })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求被终止');
    } else {
      console.error('请求出错', error);
    }
  });

终止请求

当需要终止请求时，我们调用controller.abort()方法：

controller.abort();

这时，如果请求正在进行中，浏览器会终止该请求，并抛出AbortError异常。

XMLHttpRequest：传统浏览器的主流

虽然AbortController提供了更简洁的API，但在一些旧版浏览器中，我们可能需要使用XMLHttpRequest来实现请求中断。

创建XMLHttpRequest对象

首先，创建一个XMLHttpRequest对象：

const xhr = new XMLHttpRequest();

发送请求

发送请求时，我们将XMLHttpRequest对象传递给XMLHttpRequest构造函数：

xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 处理响应
    } else {
      console.error('请求出错', xhr.statusText);
    }
  }
};
xhr.send();

终止请求

在请求发送后，我们可以通过调用XMLHttpRequest对象的abort()方法来终止请求：

xhr.abort();

这时，如果请求正在进行中，浏览器会终止该请求，并返回一个错误状态码。

总结

本文介绍了在JavaScript中终止已发出的请求的两种方法：AbortController和XMLHttpRequest。在实际开发中，我们可以根据浏览器的兼容性选择合适的方法来实现请求中断。希望这篇文章能帮助到大家。

-- 展开阅读全文 --