XMLHttpRequest实现终止请求和超时

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里是使用的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);
}
<think>嗯,用户之前问过关于Chrome浏览器请求超时怎么设置的问题,现在他们需要一个示例来测试这些设置。我需要结合之前的回答提供的引用内容来给出具体的代码示例测试方法。首先,用户提到的引用[1]是关于XMLHttpRequest的timeout属性ontimeout事件,这应该用在原生JavaScript的示例中。引用[2]提到Axios默认使用XMLHttpRequest,所以可以展示Axios的配置。引用[3]则涉及同时发起相同请求时的队列超时问题,可能需要展示并发请求的情况。用户可能需要一个清晰的步骤,包括代码示例测试方法。我需要确保示例涵盖不同的方法,比如原生JS、FetchAPI、AxiosjQuery,这样用户有多个参考点。同时,测试部分需要说明如何模拟超时,比如使用开发者工具的网络节流或者延迟服务器响应。 还要注意数学公式的正确格式,比如用$包裹变量,但根据用户当前的请求,可能不需要太多数学内容,但如果有涉及时间计算的地方,可能需要用上。例如,解释超时时间与延迟的关系时,可以用$T_{timeout} =5000ms$这样的表达。 另外,用户希望生成相关问题,可能需要围绕测试方法、不同库的配置、错误处理等方面提问。比如如何模拟慢速网络,或者如何处理多个请求超时。需要确保代码示例正确,比如Axios的timeout设置是否正确,AbortController的使用是否恰当。同时,测试步骤要详细,比如如何用Chrome的开发者工具来模拟网络延迟,观察控制台输出网络面板的变化。可能还需要提醒用户,某些配置如系统级的TCP设置需要高级权限,而代码层面的设置更常见。同时,引用文献要正确对应,比如引用[1]对应XMLHttpRequest的部分,引用[3]对应Axios的并发请求示例。 最后,检查回答结构是否清晰,分步骤说明,代码格式正确,相关问题是否相关。确保所有引用标记正确,没有遗漏用户的需求点。</think>### Chrome浏览器请求超时测试示例 --- #### 一、原生JavaScript实现与测试 1. **XMLHttpRequest超时测试** ```javascript function testXHRTimeout() { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://httpbin.org/delay/10'); // 服务器延迟10秒响应 xhr.timeout = 5000; // 设置5秒超时[^1] xhr.onload = () => console.log('请求成功:', xhr.response); xhr.ontimeout = () => console.error('5秒超时触发'); xhr.send(); } ``` - **测试方法** 在Chrome开发者工具中执行: 1. 打开`Network`面板 2. 点击`Throttling`选择`Slow 3G`(模拟高延迟网络) 3. 运行代码后观察控制台输出网络请求状态 2. **Fetch API超时测试** ```javascript async function testFetchTimeout() { const controller = new AbortController(); setTimeout(() => controller.abort(), 3000); // 3秒后终止请求 try { const response = await fetch('https://httpbin.org/delay/5', { signal: controller.signal }); console.log('请求成功:', await response.json()); } catch (err) { console.error('请求失败:', err.name); // 输出"AbortError" } } ``` - **数学关系验证** 设服务器响应时间为$T_{server}$,超时时间为$T_{timeout}$,则触发条件为: $$T_{server} > T_{timeout}$$ --- #### 二、Axios并发请求测试 ```javascript // 创建Axios实例 const instance = axios.create({ timeout: 8000, // 单个请求超时时间[^3] baseURL: 'https://httpbin.org' }); // 模拟并发请求 function testConcurrentTimeout() { const requests = [ instance.get('/delay/10'), // 延迟10秒 instance.get('/delay/5') // 延迟5秒 ]; axios.all(requests) .then(axios.spread((res1, res2) => { console.log('全部请求成功'); })) .catch(err => { console.error('超时请求:', err.config.url); // 第一个请求超时 }); } ``` - **测试结果分析** | 请求序号 | 延迟时间 | 超时设置 | 结果 | |----------|----------|----------|------------| | 1 | 10s | 8s | 超时失败 | | 2 | 5s | 8s | 成功响应 | --- #### 三、jQuery超时配置示例 ```javascript $.ajax({ url: "https://httpbin.org/delay/3", timeout: 2000, // 2秒超时[^2] success: function(result) { console.log("请求成功"); }, error: function(xhr, status, error) { if (status === "timeout") { console.error("2秒超时触发"); } } }); ``` --- #### 四、测试验证方法 1. **开发者工具网络模拟** - 打开`F12 → Network → Throttling` - 选择`Add...`自定义配置: ```json { "latency": 6000, // 6秒延迟 "download": 1, // 1kbps带宽 "upload": 1 } ``` 2. **服务器端延迟模拟** 使用Python快速搭建测试服务: ```python from flask import Flask import time app = Flask(__name__) @app.route('/delay/<int:t>') def delayed_response(t): time.sleep(t) # 模拟服务端延迟 return f"Delayed {t} seconds" if __name__ == '__main__': app.run(port=5000) ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值