ajax请求超时与网络异常相应

喜欢ヅ旅行 2023-10-06 17:20 51阅读 0赞

前端请求

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>请求超时与网络异常</title>
        <style>
            #result{
         
                width:200px;
                height:100px;
                border:solid 1px #90b;
            }
        </style>
    </head>
    <body>
        <button>点击发送请求</button>
        <div id="result"></div>
        <script>
            const btn = document.getElementsByTagName('button')[0];
            const result = document.querySelector('#result');
    
            btn.addEventListener('click', function(){
         
                const xhr = new XMLHttpRequest();
                //超时设置 2s 设置
                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>
    </body>
    </html>

后端响应

//1. 引入express
    const express = require('express');
    
    //2. 创建应用对象
    const app = express();
    
    //3. 创建路由规则
    // request 是对请求报文的封装
    // response 是对响应报文的封装
    app.get('/server', (request, response) => {
        //设置响应头  设置允许跨域
        response.setHeader('Access-Control-Allow-Origin', '*');
        //设置响应体
        response.send('HELLO AJAX - 2');
    });
    
    //延时响应
    app.all('/delay', (request, response) => {
        //设置响应头  设置允许跨域
        response.setHeader('Access-Control-Allow-Origin', '*');
        response.setHeader('Access-Control-Allow-Headers', '*');
        setTimeout(() => {
            //设置响应体
            response.send('延时响应');
        }, 1000)
    });
    
    //4. 监听端口启动服务
    app.listen(8000, () => {
        console.log("服务已经启动, 8000 端口监听中....");
    });