原生AJAX - AJAX请求问题 - 《Web 开发学习笔记》

请求超时与网络异常问题
- 超时
- 网络异常
取消请求
重复发送请求问题

请求超时与网络异常问题

超时

html:

<script>
        const btn = document.querySelector("button");
        const result = document.querySelector("#result");
        btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            //增加超时设置:请求超过两秒就取消
            xhr.timeout = 2000;
            xhr.open("GET","http://127.0.0.1:8000/delay");
            xhr.send();
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status < 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>

server.js:add

//延时响应
app.get('/delay',(request, response)=>{
    //设置响应头   设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    //设置一个延时响应来测试
    setTimeout(() => {
        //设置响应体
        response.send("Hello delay-issue");        
    }, 3000);
})

超时就会取消
可以再添加一个超时时的回调函数

//增加超时设置:请求超过两秒就取消
xhr.timeout = 2000;
//超时回调
xhr.ontimeout=()=>{
  alert("网络超时，请稍后重试")
}

实际运用中，我们会选择更加友好的方式，如展现一个div来充当遮罩层以提高用户的体验。

网络异常

添加网络异常回调函数

//超时回调
xhr.ontimeout=()=>{
  alert("网络超时，请稍后重试")
}
//网络异常回调函数
xhr.onerror = ()=>{
  alert("网络似乎出现了一些问题");
}

可以通过chrome的工具来测试—设置为offline断网
效果：

取消请求

发送请求后，结果返回之前，可以通过代码手动取消代码
要用到abort方法
html

<body>
    <button>点击发送请求</button>
    <button>点击取消请求</button>
    <script>
        const btns = document.querySelectorAll("button");
        let xhr = null;//细节
        btns[0].onclick = function(){
            xhr =new XMLHttpRequest();
            xhr.open("GET","http://127.0.0.1:8000/delay");
            xhr.send();
        }
        //abort方法
        btns[1].onclick = function(){
            xhr.abort();//如果xhr不像前面那样定义在外面，这里是访问不到的。
        }
    </script>
</body>

第一个是没取消，三秒后送达；第二个取消。

重复发送请求问题

有时出了一些问题，按钮点击后没有反应，用户就可能重复点击按钮，实际上是有反应的，用户会重复地发请求，这时服务器就会重复的试图返回相同的响应，这样就会产生问题。
我们可以判断发送请求是否相同，如果相同，就把前面未响应的请求取消掉。减少服务器的压力。

<body>
    <button>点击发送请求</button>
    <script>
        const btns = document.querySelectorAll("button");
        let xhr = null;//细节
        //设置一个标识变量:是否正在发送AJAX请求
        let isSending = false;
        btns[0].onclick = function(){
            //判断表示变量
            if(isSending){
                xhr.abort();//正在发送就把原来的取消，创建新的请求。
            }
            xhr =new XMLHttpRequest();
            //修改标识
            isSending = true;
            xhr.open("GET","http://127.0.0.1:8000/delay");
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){//发送完毕
                    //修改标识
                    isSending = false;
                }
            }
        }
    </script>
</body>

前面的都会被取消掉—->减轻服务器的压力。