XMLHttpRequest实现终止请求和超时

最新推荐文章于 2025-10-12 22:01:01 发布

原创最新推荐文章于 2025-10-12 22:01:01 发布 · 2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#xmlhttprequest #请求超时 #终止请求

客户端JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用XMLHttpRequest及XMLHttpRequest2中的API来实现HTTP请求的取消与超时处理。详细解释了abort()方法的作用及其在不同场景下的应用，并提供了一个具体的实现示例。

这里是使用的XMLHttpRequest2中的API，口蹄疫通过XMLHttpRequest对象的 abort( )方法 来取消正在进行的HTTP请求，abort( )方法是在XMLHttpRequest和XMLHttpRequest2中都可用的，调用abort( )方法在这个对象上触发abort事件。

调用abort( )的主要原因是完成像取消或超时请求消耗的是啊进太长或当响应变得无关时的情况
例如：使用XMLHttpRequest为文本输入域请求自动完成推荐，如果用户在服务器的建议到达之前输入了新的字符，这时等待请求就不再有用了，所有应该终止

XMLHttpRequest2中定义了 timeout 属性来指定请求自动终止的毫秒数，也定义了timeout事件用于超时发生时触发，但是到目前位置，浏览器还不支持这些自动超时，
但是我们可以使用setTimeout( )和abort( )方法来实现自己的超时

/*
发起HTTP GET请求获取指定URL的内容
如果响应成功到达，则传入responseText给回调函数
如果响应在timeout时间内没有到达，则中止请求
浏览器可能会在abort()后出啊发readystatechange
如果部分请求结果到达，甚至可能设置status属性
所有需要设置一个标记，当部分且超时的响应到达时不会调用回调函数
如果使用load(当请求完成时触发)事件就没有这个风险
*/
function(url,timeout,callback){
    var request = new XMLHttpRequest();
    var time = false;//是否超时
    var timer = setTimeout(function(){
        timeout = true;
        request.abort();//请求中止
    },timeout);
    request.open("GET",url);
    request.onreadystatechange = function(){
        if(request.readyState !==4) continue;//忽略未完成的请求
        if(timeout) return;//忽略中止请求
        clearTimeout(timer);//取消等待的超时
        if(request.status === 200)
            callback(request.responseText);
    }
    request.send(null);
}