文章目录
1. 🐱👤AJAX系统定制开发请求超时和网络异常处理
分析：系统定制开发当前端向后端发起数据请求时，系统定制开发后端一直没有返回响应结果，系统定制开发不可能让用户一直等待下去，系统定制开发所以当请求超过一定的时间，系统定制开发就要提示用户或者取消这个请求。
1.1 🥜案例
- 系统定制开发点击发送请求按钮，等待2s后，系统定制开发弹出网络异常的弹框
- 当在控制台断开网络时，弹出网络出现问题的弹框
效果如下：
在服务器中设置一个定时器，模拟给服务器发送请求超时的情况，当3s后返回响应结果。
server.js
// 1.引入expressconst { response } = require('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 端口监听中....")})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
1.2 🔧请求超时的处理
在客户端设置超时2s（服务器3s之后才会返回响应结果），自动取消请求，并弹框告知用户网络异常。
const xhr = new XMLHttpRequest()// 超时设置 2s 设置（超过2s请求取消）xhr.timeout = 2000// 超时回调xhr.ontimeout = function () {alert('网络异常，请稍后重试！！！')}- 1
- 2
- 3
- 4
- 5
- 6
- 7
1.3 🔩请求时网络异常的处理
分析：网络异常出现的原因可能是网络断开，但是我们不能让用户无限的等待，所以我们可以通过设置网络异常来提醒用户，网络出现了问题。
当无网络连接时（可以在控制台设置网络为 offline），调用网络异常的回调，并弹框告知用户网络有问题。
// 网络异常回调xhr.onerror = function () { alert('你的网络似乎出了一些问题！！')}- 1
- 2
- 3
- 4
整体代码如下：
<!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: solid 1px #90b; } </style></head><body> <button>点击发送请求</button> <div id="result"></div> <script> const btn = document.getElementsByTagName('button')[0] const result = document.getElementById('result') btn.onclick = function () { const xhr = new XMLHttpRequest() // 超时设置 2s 设置（超过2s请求取消） 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
- 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
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
2. 🔨如何手动取消AJAX请求
分析：取消请求发生在我们已经发送了请求，但是请求结果还没有返回给我们，这时我们可以设置取消请求。
2.1 🥜案例
- 当点击发送按钮，发送AJAX请求
- 当点击取消按钮，取消发送AJAX请求
效果如下:
还是和上述一样，在服务器中设置一个定时器，模拟给服务器发送请求超时的情况，当3s后返回响应结果。
server.js
// 1.引入expressconst { response } = require('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 端口监听中....")})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
2.2 🔧取消AJAX请求方法
当点击取消按钮时，调用abort()方法来取消请求
取消请求.html
<!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></head><body> <button>点击发送</button> <button>点击取消</button> <script> // 获取元素对象 const btns = document.querySelectorAll('button') let xhr = null btns[0].onclick = function () { xhr = new XMLHttpRequest() xhr.open('GET', 'http://127.0.0.1:8000/delay') xhr.send() } // 调用abort()方法手动取消请求 // abort()：用来终止一个进程 btns[1].onclick = function () { xhr.abort() } </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
需要注意的是：前面我们使用了const的方法，进行对进行声明，但是要注意const的值是不能改的，所以我们要首先使用let进行xhr=null的赋值，然后再对xhr = new XMLHttpRequest()。
2.3 🔩解决重复发送请求的问题
设置一个标识变量isSending，当点击发送按钮时，判断isSending的布尔值
<body> <button>点击发送</button> <script> // 获取元素对象 const btns = document.querySelectorAll('button') let xhr = null // 标识变量 // 是否正在发送AJAX请求,当为false表示未在发送请求,反之则正在发送请求 let isSending = false btns[0].onclick = function () { // 判断标识变量 // 如果正在发送，则取消该请求，创建一个新的请求 if (isSending) xhr.abort() xhr = new XMLHttpRequest() //修改 标识变量的值 isSending = true xhr.open('GET', 'http://127.0.0.1:8000/delay') xhr.send() xhr.onreadystatechange = function () { if (xhr.readyState === 4) { // 修改标识变量 isSending = false } } } </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
- 28
- 29
今天的分享就到这里啦。✨
关注💖 点赞🤞 收藏🌹