如何在AJAX请求超时时正确取消未完成的请求？

司马春萍提问于 2026-02-03 22:42:32 阅读 17

前端

在做搜索联想功能时，用户快速输入会导致之前的请求还没回来就覆盖了结果。我用XMLHttpRequest尝试用abort()取消，但代码写法好像有问题：


let xhr;
function search(query) {
  if (xhr) xhr.abort(); // 这里报错xhr.abort is not a function
  xhr = new XMLHttpRequest();
  xhr.open('GET', <code>/api/search?q=${query}</code>);
  xhr.onload = function() {
    if (xhr.status === 200) {
      updateResults(xhr.responseText);
    }
  };
  xhr.send();
}

页面输入时控制台一直报错，而且旧请求似乎没被真正取消，求大神看看哪里写错了？

Ajax请求

我来解答赞 7 收藏

反馈

2 条解答

Des.光正 Lv1

你那个 xhr 变量可能被搞成 undefined 或者被覆盖了，用 const 定义在函数里重新赋值就会出问题。试试这个写法：

const xhr = new XMLHttpRequest();

let currentXhr = null;



function search(query) {

  if (currentXhr) currentXhr.abort();

  currentXhr = xhr;

  xhr.open('GET', /api/search?q=${query});

  xhr.onload = function() {

    if (xhr.status === 200) {

      updateResults(xhr.responseText);

    }

  };

  xhr.send();

}

2026-02-05 19:45

设计师国玲 Lv1

检查一下你是不是在 xhr 还没赋值前就调用了 abort()，改成这样：

let xhr;

function search(query) {

  if (xhr && xhr.abort) xhr.abort();

  xhr = new XMLHttpRequest();

  xhr.open('GET', /api/search?q=${query});

  xhr.onload = function() {

    if (xhr.status === 200) {

      updateResults(xhr.responseText);

    }

  };

  xhr.send();

}

2026-02-03 23:07