请求超时与网络异常处理

最新推荐文章于 2023-06-09 01:28:12 发布

夜雨萧声

最新推荐文章于 2023-06-09 01:28:12 发布

阅读量468

点赞数

文章标签： javascript jquery json ajax

本文链接：https://blog.csdn.net/tgyzjy/article/details/123907985

版权

Web页面

<!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>请求超时与网络异常处理</title>

 <style>

 	#result {

 		width: 200px;

 		height: 100px;

 		border: 1px solid #258;

 	}

 </style>

</head>

<body>

 	<button>点击发送请求</button>

 	<div id="result"></div>

 <script>

 	const btn = document.getElementsByTagName('button')[0];

 	const result = document.getElementById('result');

 	btn.addEventListener('click',function() {

 		const xhr = new XMLHttpRequest();

 		// 超时设置

 		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('/delay',(request, response)=>{

 	// 设置响应头 设置允许跨域

 	response.setHeader('Access-Control-Allow-Origin','*');

 	setTimeout(() => {

 		// 设置响应体

 		response.send('延时响应');

 	},3000)

});

// 4.监听端口启动服务

app.listen(8000, ()=> {

	console.log("服务已经启动，8000端口监听中>>>");

})

夜雨萧声

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
请求超时与网络异常处理

Web页面<!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>请求超
复制链接

扫一扫