和浏览器异步请求取消相关的那些事

最新推荐文章于 2024-01-14 22:34:28 发布

huygo

最新推荐文章于 2024-01-14 22:34:28 发布

阅读量4.6k

点赞数 2

本文链接：https://blog.csdn.net/w1057742284/article/details/52166917

版权

本文探讨了浏览器中异步请求取消的相关问题，包括XMLHttpRequest的abort方法、页面跳转时的自动abort、jQuery对abort的处理、fetch及Promise的取消策略。在处理异步请求时，如何正确识别并处理abort事件对于优化资源利用和用户体验至关重要。

摘要由CSDN通过智能技术生成

我们开发web页面时候，也许会遇到和异步请求取消相关的问题。

如：在一个请求发送之后，用户做了一个取消指令，为了节省资源，我们需要把已经被用户取消的请求终止掉；或者是一个页面正在用ajax请求后台，突然页面发生了跳转，而我们未完成的ajax莫名其妙地走进了error里面了。

为了解决这两问题，我们今天一起看看和异步请求取消相关的那些事。

1.ajax的取消

当我们创建一个XMLHttpRequest对象的时候，我们就会发现两个api——abort和onabort，这就是终止异步请求的方法与其响应事件。

执行完abort之后，浏览器和被请求的服务器都会发生什么呢？MDN的解释非常的简单，就是中断已发送的请求。这个请求指的是http请求，而不是tcp连接，这样就会出现一个问题，基于http请求原理，当一个请求从客户端发出去之后，服务器端收到请求后，一个请求过程就结束了，这时就算是客户端abort这个请求，服务器端仍会做出完整的响应，只是这个响应客户端不会接收罢了。

所以这个abort是仅给客户端使用的，不能作为供服务器端判断请求是否继续执行的依据。

那么被abort的请求对客户端有哪些影响呢？我们可以做一个实验。

var xhr = new XMLHttpRequest();
xhr.open("GET","#");
xhr.send();
xhr.onload = function(){
    console.log("abort前");
    console.log(xhr.readyState);
    console.log(xhr.status);
    xhr.abort();
    console.log("abort后");
    console.log(xhr.readyState);
    console.log(xhr.status);
}