【AJAX】原生AJAX设置请求超时、网络异常处理、取消请求处理

最新推荐文章于 2024-03-29 02:23:45 发布

原创最新推荐文章于 2024-03-29 02:23:45 发布

· 935 阅读

2 ·

版权

文章标签：

#ajax #okhttp #前端

AJAX 专栏收录该内容

15 篇文章

订阅专栏

文章讲述了如何通过设置标识变量和使用xhr.abort()方法来避免在用户操作下重复发送AJAX请求。当点击事件触发时，首先检查是否已有请求正在发送，如果有则取消当前请求，然后创建新的请求并更新发送状态标识。在xhr.onreadystatechange中，改变发送状态标识以表示请求已完成。

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

// 超时设置 2s

xhr.timeout =2000;

// 超时回调

xhr.ontimeout = function(){

alert('网络异常，请稍后重试。')

};

// 网络异常

xhr.onerror = function(){

alert('网络出问题。')

};

以上代码放在new和open之间

//取消请求处理

xhr.abort();

如何解决重复发送请求，取消上一个请求

// 第一步：标识变量,是否在发送AJAX请求

let isSending = false;

btn.onclick = function(){

//第二步：进行判断，如果上一个正在发送，则取消该请求，创建一个新的请求

if (isSending) xhr.abort();

xhr = new XMLHttpRequest();

// 修改标识变量的值

isSending = true;

xhr.open('GET','http://127.0.0.1:8000/server');

xhr.send();

xhr.onreadystatechange = function(){

if (xhr.readyState) {

// 修改标识变量

isSending = false;

}

};

};