昨天博主去考了英语六级,赵州桥可真给我整不会了…
祝参加英语四六级的大佬们都能取得好成绩!
一遍过!一遍过!
在页面发送ajax请求时,无法保证服务器准时准点的响应请求,如果请求发送之后服务器一直无法响应请求,用户一直等待导致用户耐心下降,影响产品口碑;
【=分割线=】
一般产品都有规定的非功能需求,也就是对响应时间做出了规定,若服务器无法按时响应,理应将服务器无法响应(或网络异常)的信息反馈给用户,于是需要对异常进行处理。
我们可以通过 node + express
技术预设一个服务器,在服务器中设置发送请求后3s再响应,以模拟请求超时的情况。具体代码如下:
// 引入express
const 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、response.setHeader(‘Access-Control-Allow-Origin’, ’ * ')
表示设置响应头,允许跨域2、response.setHeader(‘Access-Control-Allow-Headers’, ’ * ')
表示设置响应头,允许自定义请求头
3、在get请求发送后,进入定时器,3s后返回响应体(‘codeMak1r.延时响应’)
- 点击按钮发送AJAX请求,等待3s后服务器返回响应体
- 将返回的响应体放在预设的div中。
<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>
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>
服务器3s才能响应请求,2s后页面请求得不到响应,就会触发超时的回调。
弹窗提醒:网络异常,请稍后重试!
效果如下:
直接在超时回调后添加一个网络异常的回调
// 网络异常回调
xhr.onerror = function () {
alert('你的网络似乎出了一些问题!')
}
打开chrome浏览器,打开控制台 => NetWork => 设置网络为
offline
.
好啦~今天的文章分享就到这里了,如果有疑问或者文章出现错误的话请一定要联系我哟~
非常感谢你的阅读,你的支持将会是我最大的动力
关注✨点赞收藏
回见~