12.取消请求

在请求的过程当中，结果还没有回来之前，我们可以通过代码手动取消请求

为了实现手动取消的效果，服务器端还是 3s 以后才会返回数据

app.get('/delay', (request, response) => {
  response.setHeader('Access-Control-Allow-Origin', '*')
  response.setHeader('Access-Control-Allow-Headers', '*')
  setTimeout(() => {
    response.send('HELLO IE')
  }, 3000);
})

通过 xhr 对象的 abort() 方法就可以手动取消请求

  xhr.abort();

 此时点击按钮发送请求等待 3s 返回结果的过程中，我们点击取消按钮就可以取消这个请求

整理如下

    const result = document.querySelector("#result");
    const btn1 = document.querySelector("#send");
    const btn2 = document.querySelector("#cancel");
    // 为了让 btn1 和 btn2 都能调用 xhr，所以写在外面
    let xhr = null;
    btn1.addEventListener("click", () => {
      xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:8000/delay");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response;
          }
        }
      };
    });
    btn2.addEventListener("click", () => {
      xhr.abort();
    });