取消异步Web服务调用

取消异步Web服务调用的方法如下：

使用AbortController对象

在JavaScript中，可以使用AbortController对象来取消异步Web服务调用。首先，创建一个AbortController对象，然后调用AbortController对象的signal属性，将其作为fetch()方法的参数传递。当需要取消异步Web服务调用时，只需调用AbortController对象的abort()方法即可。

示例代码：

const controller = new AbortController();
const signal = controller.signal;

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// 取消异步Web服务调用
controller.abort();

使用XMLHttpRequest对象

在旧版本的浏览器中，可以使用XMLHttpRequest对象来取消异步Web服务调用。首先，创建一个XMLHttpRequest对象，然后在send()方法之前，将XMLHttpRequest对象的onreadystatechange属性设置为一个回调函数。当需要取消异步Web服务调用时，只需调用XMLHttpRequest对象的abort()方法即可。

示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText));
    } else {
      console.error('Request error:', xhr.statusText);
    }
  }
};

xhr.send();

// 取消异步Web服务调用
xhr.abort();

需要注意的是，取消异步Web服务调用后，通常会触发一个AbortError异常。可以在catch()方法中捕获该异常，并进行相应的处理。