如何取消ajax请求的回调

发布网友发布时间：2022-05-06 10:21

共1个回答

热心网友时间：2022-05-15 05:34

我们在开发过程中有时候会碰到这样的需求，连续发送多个ajax请求，请求个数大于等于2，后面的ajax请求发送时，如果前面的ajax请求还没有返回，就取消前面ajax请求回调的执行。

在继续后面的内容之前，先同步一个概念，文中所说的取消ajax的请求，指的是取消ajax请求的回调函数，ajax的请求发送后，这个请求我们是阻止不了的，但是可以取消其回调的执行。

举个简单的例子，你泼了一盆水，水已经泼出去了，水离开盆之后是阻止不了的，但是可以阻止泼出去的后果，比方说你泼了产品经理一盆水，赶紧跑就不会被打到。

接下来，看一下原生js如何处理ajax请求的取消，原生js利用的是XMLhttprequest实例的一个叫做abort的方法，看一下官方文档的代码：
var xhr = new XMLHttpRequest(), method = "GET", url = "/"; xhr.onreadystatechange = () => { if(xhr.readyState===4&&xhr.status===200){ console.log('ok') } } xhr.open(method, url, true); xhr.send(); xhr.abort();
我们在浏览器中调试代码，在调用abort之后，onreadystatechange会被执行，但是满足readystate=4和status=200的情况就不会出现了。

官方文档提到，xhr调用abort之后，readyState 会被重置为0，readyState变化会触发onreadystatechange函数，而readyState已经被重置为0，此时用户定义的回调函数就不会执行了。

我个人感觉不同的浏览器实现机制可能不一样。我们需要了解的是，ajax请求发送后，在回调调用之前，调用abort，这个ajax的回调就不会被执行了。

以上便是原生js如何处理取消ajax请求回调的原理了。