Ajax——超时与网络异常

最新推荐文章于 2022-11-21 21:35:39 发布

像费曼%

最新推荐文章于 2022-11-21 21:35:39 发布

阅读量306

点赞数

分类专栏： Ajax 文章标签： ajax javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_53052268/article/details/126321433

版权

Ajax 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种处理AJAX请求中网络延迟的方法，通过设置超时时间和错误回调来改善用户体验。具体实现包括使用XMLHttpRequest对象进行GET请求，并通过JavaScript监听超时及错误事件。

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

1.用户给服务器发送强求，但服务器有时候不及时响应，或者存在网络异常等问题导致用户体验感下降，为了提高用户的体验感我们可以设置弹框提示

2.代码展示

<script>
         const btn = document.getElementsByTagName('button')[0];
         const result = document.getElementById('result');
        
         const xhr = new XMLHttpRequest();
         btn.addEventListener('click',function(){
            //超时设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function(){
                alert("网络异常，请稍后重试");
            }

            xhr.onerror = function(){
                alert("你的网络似乎出了些问题");
            }
           
            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>

2.1 timeout属性等于一个整数，用来设置当请求发出后等待接受响应的时间。ontimeout（）方法则是当等待超时后，自动执行的回调方法。

3.server.js

app.get('/delay',(request,response)=>{
    //设置响应头 设置允许跨域，第二个参数‘*’指的是响应头内容
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应
    setTimeout(()=>{
       response.send('hello AJAX delay') 
    },3000)

    
})