AJAX超时请求、取消请求、重复发送请求

请求超时和网络异常处理

前端设置

• 超时设置

//超时设置
xhr.timeout = 2000;

• 超时回调

xhr.ontimeout = function(){
    alert("网络异常，稍后重试");
}

• 网络异常回调

xhr.onerror = function(){
    alert("你的网络似乎出了点问题！");
}

后端设置

app.get('/delay',(request, response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置定时器
    setTimeout(()=>{
        response.send('延时响应');
    },3000)
    //设置响应体 
});

取消请求

前端设置

利用abort函数

xhr.abort()；

重复请求问题

let x = null;
let isSending = false;//是否正在发送AJAX请求
btn[0].onclick = function(){
    //判断标识变量
    if(isSending) x.abort(); //如果正在发送，则取消该请求，创建一个新的请求
    x= new XMLHttpRequest();
    //修改标识变量的值
    isSending = true;
    x.open("GET","http://127.0.0.1:8000/delay");
    x.send();
    x.onreadystatechange = function(){
        if(x.readyState === 4){
            //修改表示变量
            isSending = false;
           
        }
    }
}