文章目录
4️⃣ 2️⃣ 5️⃣ 定制网站祝诸佬四六级必过！
定制网站昨天博主去考了英语六级，定制网站赵州桥可真给我整不会了…
定制网站祝参加英语四六级的大定制网站佬们都能取得好成绩！
一遍过！一遍过！🤩
❓定制网站为什么要对超时和网络定制网站异常进行处理
定制网站在页面发送请求时，定制网站无法保证服务器准时准点的响应请求，如果请求发送之后服务器一直无法响应请求，用户一直等待导致用户耐心下降，影响产品口碑；
【=分割线=】
一般产品都有规定的非功能需求，也就是对响应时间做出了规定，若服务器无法按时响应，理应将服务器无法响应（或网络异常）的信息反馈给用户，于是需要对异常进行处理。
🕹 服务器延时响应模拟请求超时
我们可以通过 node + express技术预设一个服务器，在服务器中设置发送请求后3s再响应，以模拟请求超时的情况。具体代码如下：
🖥 server.js
// 引入expressconst express = require('express')// 创建应用对象const app = express()// 创建路由规则 // request 对请求报文的封装// response 对响应保文的封装// 延时响应app.get('/delay', (request, response) => { response.setHeader('Access-Control-Allow-Origin', '*') response.setHeader('Access-Control-Allow-Headers', '*') setTimeout(() => { response.send('codeMak1r.延时响应') }, 3000)})// 监听端口，启动服务app.listen(8000, () => { console.log('服务已经启动，端口8000监听中...')})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
解释：
1、response.setHeader(‘Access-Control-Allow-Origin’, ’ * ')
表示设置响应头，允许跨域2、response.setHeader(‘Access-Control-Allow-Headers’, ’ * ')
表示设置响应头，允许自定义请求头
3、在get请求发送后，进入定时器，3s后返回响应体（‘codeMak1r.延时响应’）
🕹 发送请求
- 点击按钮发送AJAX请求，等待3s后服务器返回响应体
- 将返回的响应体放在预设的div中。
⌨️ delay.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 #90b } </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.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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
🕹 对请求进行超时设置
⌨️ delay.html
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() // 超时设置 2s xhr.timeout = 2000 // 超时回调 xhr.ontimeout = 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
服务器3s才能响应请求，2s后页面请求得不到响应，就会触发超时的。
弹窗提醒：网络异常，请稍后重试！
效果如下：
🕹 对请求进行网络异常设置
直接在超时回调后添加一个网络异常的回调 👇
// 网络异常回调xhr.onerror = function () { alert('你的网络似乎出了一些问题！')}- 1
- 2
- 3
- 4
打开chrome浏览器，打开控制台 => NetWork => 设置网络为
offline.
再次发送请求，效果如下⬇️：
好啦～今天的文章分享就到这里了，如果有疑问或者文章出现错误的话请一定要联系我哟😎😎～
非常感谢你的阅读，你的支持将会是我最大的动力💪💪
👉关注✨点赞👍收藏📂
回见～