Ajax network timeout and network exception

We have no way to ensure that the server can quickly return information (too many viewers, server overload, etc.).
We provide friendly reminders to users on the front end.
Make the product experience better.

Case study

When the server does not send the result to the browser within two seconds, the front end of the browser prompts that the network timed out.
Set content

Front-end settings, when no reply is received within two seconds, it will prompt the network to time out.
1. Create in testseven文件夹and in this folder
2. Create error.html文件
3. Createserver.js文件
error.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击获取信息</button>
    <div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div>
    <script>
        // 一:获取元素对象
        const texttwo = document.getElementsByTagName('button')[0];
        // 
        const result = document.querySelector('#result');
        // 
        texttwo.addEventListener('click', function(){
     
     
            console.log('点击发送测试成功.')
            // 1.发送请求
            const textone = new XMLHttpRequest();
            // 超时设置  超过两秒 请求将会自动取消
            textone.timeout = 2000;
            // 超时回调,确认超时后，弹出一个窗口
            textone.ontimeout = function(){
     
     alert('两秒内没有接收到返回，故弹出窗口');}
            // 网络异常
            // 这个不需要后端去处理，只是用户的网络出现了问题
            // 只做一个弹出框来友好地告诉用户
            textone.onerror = function(){
     
     alert('网络异常的弹出框.');}
            // 自动转化
            // 借助textone对象里面的属性来转化
            // 设置响应体数据的类型
            textone.responseType = 'json';
            // 2.初始化
            textone.open('GET','http://127.0.0.1:8000/ie?t='+Date.now());
            // 3.发送
            textone.send();
            // 4.事件绑定
            textone.onreadystatechange = function(){
     
     
                if(textone.readyState === 4){
     
     
                    if(textone.status >= 200 && textone.status < 300){
     
     
                        // 测试打印
                        console.log(textone.response);
                        //  使用自动转化
                        result.innerHTML = textone.response.name;
                    }
                }
            }
        });
    </script>
</body>
</html>

After receiving the back-end settings, wait three seconds before responding.
Use the timer for delayed transmission.
server.js文件

// 1. 引入express
const express = require('express');

// 2.创建对象
const app = express();
// 3.创建路由规则  里面的形参 request与response   (自己可以随便定义名字的)
//  建议写成  request与response  因为可以见名思意，方便自己看
// request  对请求报文的封装
// responst 对响应报文的封装
//  请求路径为'/ie'

// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all  表示可以接收任意类型的请求      如get post 等等
app.get('/ie', (request, response)=>{
    
    
    // 设置响应头 设置允许跨域
    // 头名字为Access-Control-Allow-Origin
    // 头的值为
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头        *号表示所有的头信息都可以接收
    response.setHeader('Access-Control-Allow-Headers','*');
    // 响应一个数据   把这个对象返回给浏览器
    const data = {
    
    
        name: 'setTimeout'
    };
    // 对对象进行字符串转换
    let str = JSON.stringify(data);
    // 设置定时器延时
    // setTimeout(()=>{},3000);
    // 设置响应体
    // response.send(str);
    // 把响应体放进延时器函数里面
    setTimeout(()=>{
    
    response.send(str);},3000);

});

// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
    
    
    console.log("服务已经启动，8000端口监听中......");
});

Insert picture description here

Set the browser to disconnect this page and
change online to offline

Insert picture description here