ajax设置超时时间

最新推荐文章于 2024-05-11 19:28:41 发布

慢慢学编程

最新推荐文章于 2024-05-11 19:28:41 发布

阅读量2.6k

点赞数

分类专栏：慢慢学编程文章标签： ajax 超时

本文链接：https://blog.csdn.net/weixin_40492102/article/details/108103900

版权

慢慢学编程专栏收录该内容

28 篇文章 0 订阅

订阅专栏

服务端

使用定时器设置3秒延迟，仿真网络延迟。

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

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

//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/ie', (request, response) => {
    //设置响应头 设置运行跨域
    response.setHeader('Access-Control-Allow-Origin', '*');

    // 设置响应体
    setTimeout(() => {
            response.send("HELLO delay");
        },
        3000);
});

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

ajax设置
使用 xhr.timeout = 超时时间； 设置超时时间
使用xhr.ontimeout = function(){}; 完成回调函数

（关键）

  xhr.timeout = 2000;
  xhr.ontimeout = function() {
            alert("网络延迟，请稍后再试");
  }

（完整）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络延迟</title>
    <style>
        body {
            background: cornsilk
        }
        
        #btn {
            width: 20vw;
            height: 10vh;
            margin-left: 50%;
            margin-top: 10vh;
            transform: translateX(-50%);
            font-size: 1.4rem;
            letter-spacing: 2px;
        }
        
        #result {
            width: 50vw;
            height: 50vh;
            border: 1px solid pink;
            margin: 10vh auto;
            line-height: 50vh;
            text-align: center;
        }
    </style>
</head>

<body>
    <button id="btn">点击发送请求</button>
    <div id="result">

    </div>

</body>
<script>
    btn.addEventListener('click', function() {
        const xhr = new XMLHttpRequest();
        xhr.timeout = 2000;
        xhr.ontimeout = function() {
            alert("网络延迟，请稍后再试");
        }
        xhr.open('GET', 'http://127.0.0.1:8000/ie?t=' + Date.now());
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr.response);
                    result.innerHTML = xhr.response;
                }
            }
        }
    })
</script>

</html>

运行结果如下

运行结果

慢慢学编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax设置超时时间

服务端使用定时器设置3秒延迟，仿真网络延迟。//1.引入expressconst express = require('express');//2.创建应用对象const app = express();//3.创建路由规则// request 是对请求报文的封装// response 是对响应报文的封装app.get('/ie', (request, response) => { //设置响应头设置运行跨域 response.setHeader('Access
复制链接

扫一扫

专栏目录