取消XHR请求

10 浏览
0 Comments

取消XHR请求

我有：\n

function send(){
  $.get("/site/send.php", function(data){
    alert(data);
  }
}

\n在site/send.php中我有：\n

sleep(1000)
echo "OK";

\n接下来我在我的js文件中有：\n

send();
$("#click").click(function(){
  $.get("/site/reset.php", function(data){
    alert(data);
  }
})

\n在reset.php中有：\n

echo "RESET";

\n在这个例子中，我在sleep小于1000之前一直有XHR。在Firebug中我看到这个。在函数send()中，直到sleep小于1000才有响应和成功。这是正常的，但如果我使用.click()，我想取消这个请求。现在我一直有send()函数，直到它停止（> 1000）才能开始使用.click()函数。为什么这个不是异步的？\n这可能吗？也许可以取消站点上的所有请求？

0

2 答案

0 Comments

取消XMLHttpRequest（XHR）请求的问题通常出现在客户端。每个请求都是一个独立的实例或线程，无法通过发出另一个请求来取消某个请求。然而，可以在客户端上取消当前的请求。以下是解决该问题的方法：

1. 使用abort()方法取消请求。可以在XMLHttpRequest对象上调用abort()方法来取消请求。例如：

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.com/api/data", true);
xhr.send();
// 取消请求
xhr.abort();

2. 使用Promise和async/await取消请求。可以使用Promise和async/await结合来取消请求。例如：

function makeRequest() {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "example.com/api/data", true);
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = function() {
      reject(xhr.statusText);
    };
    xhr.send();
  });
}
// 取消请求
var request = makeRequest();
async function cancelRequest() {
  try {
    const response = await request;
    // 处理响应数据
  } catch (error) {
    console.error(error);
  }
}
cancelRequest();

这些方法可以在客户端上取消XMLHttpRequest请求，以解决取消请求的问题。无论是使用abort()方法还是结合Promise和async/await，都可以有效地取消请求并处理相应的逻辑。

0
0 Comments

取消XHR请求的原因是为了避免不必要的网络请求或中止已经发送的请求。要解决这个问题，需要保存XHR对象的引用，并在需要时中止它。以下是解决方法的代码示例：

var myXhr = null;
$("#click").click(function(){
  myXhr = $.get("/site/reset.php", function(data){
    alert(data);
  });
})
if (myXhr) {
  myXhr.abort();
}

上述代码中，当点击id为"click"的元素时，发送一个GET请求到"/site/reset.php"。在发送请求之前，将XHR对象赋值给变量myXhr。如果需要中止请求，可以调用myXhr.abort()方法来中止XHR请求。

如果对语法不确定，可以参考类似的问题，如以下链接中的一些问题：

- [How to you abort/cancel a request using the Prototype JS library](https://stackoverflow.com/questions/3161700)

- [Abort Ajax POST](https://stackoverflow.com/questions/7565798)

- [How to cancel/abort jQuery AJAX request?](https://stackoverflow.com/questions/4551175)

0