AJAX超时与网络异常

最新推荐文章于 2022-11-30 19:13:17 发布

林之.

最新推荐文章于 2022-11-30 19:13:17 发布

阅读量387

点赞数

分类专栏：前端学习文章标签：前端 ajax http

本文链接：https://blog.csdn.net/m0_51144154/article/details/121435521

版权

前端学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

AJAX超时与网络异常

1)前端部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width:200px;
            height:200px;
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id='result'></div>
</body>
<script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.querySelector('#result');

    btn.onclick = 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>
</html>

2)服务器端代码

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

//2.创建应用对象
const app = express();

//3.创建路由规则

//延时响应
app.get('/delay', (request, response) => {
    //'/server'就相当于一个url
    
        //设置响应头、设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    
    setTimeout(() => {
        //设置响应体
        response.send('延时响应')
    },3000)
    });

//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已经启动，8000端口监听中...')
})