Ajax网络超时和和网络异常

最新推荐文章于 2021-11-20 10:05:04 发布

LuiChun

最新推荐文章于 2021-11-20 10:05:04 发布

阅读量462

点赞数

分类专栏：前后端分离 nodejs web 文章标签： node.js 前端 javascript html chrome

本文链接：https://blog.csdn.net/weixin_47021806/article/details/112093098

版权

web 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

前后端分离

9 篇文章 0 订阅

订阅专栏

nodejs

9 篇文章 0 订阅

订阅专栏

回到文章总目录

Ajax网络超时和和网络异常

我们没有办法保证服务端能够快速的返回信息（浏览人数过多，服务器超载，等情况）
我们在前端给用户作出友好的提醒。
把产品体验做得更好。

案例

当服务器在两秒内没给浏览器发送结果，那么浏览器的前端作出提示，网络超时。
设置内容

前端设置，当两秒内没有接收回复响应，那么就提示网络超时。
1.创建在testseven文件夹并在这个文件夹里面
2.创建error.html文件
3.创建server.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>

后端设置接收后，等待三秒再进行回复响应。
使用定时器进行延时发送。
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端口监听中......");
});