AJAX--无量境神秘<对超时和网络异常的处理>

文章目录

  • 4️⃣ 2️⃣ 5️⃣ 祝诸佬四六级必过!
  • ❓为什么要对超时和网络异常进行处理
  • 服务器延时响应模拟请求超时
    • server.js
  • 发送请求
    • ⌨️ delay.html
  • 对请求进行超时设置
    • ⌨️ delay.html
  • 对请求进行网络异常设置

在这里插入图片描述

4️⃣ 2️⃣ 5️⃣ 祝诸佬四六级必过!

昨天博主去考了英语六级,赵州桥可真给我整不会了…
祝参加英语四六级的大佬们都能取得好成绩!
一遍过!一遍过!

AJAX--无量境神秘<对超时和网络异常的处理>_第1张图片


❓为什么要对超时和网络异常进行处理

在页面发送ajax请求时,无法保证服务器准时准点的响应请求,如果请求发送之后服务器一直无法响应请求,用户一直等待导致用户耐心下降,影响产品口碑;
【=分割线=】
一般产品都有规定的非功能需求,也就是对响应时间做出了规定,若服务器无法按时响应,理应将服务器无法响应(或网络异常)的信息反馈给用户,于是需要对异常进行处理。

服务器延时响应模拟请求超时

我们可以通过 node + express技术预设一个服务器,在服务器中设置发送请求后3s再响应,以模拟请求超时的情况。具体代码如下:

server.js

// 引入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.延时响应’)

发送请求

  1. 点击按钮发送AJAX请求,等待3s后服务器返回响应体
  2. 将返回的响应体放在预设的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>

对请求进行超时设置

⌨️ 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>

服务器3s才能响应请求,2s后页面请求得不到响应,就会触发超时的回调。
弹窗提醒:网络异常,请稍后重试!

效果如下:

对请求进行网络异常设置

直接在超时回调后添加一个网络异常的回调

// 网络异常回调
xhr.onerror = function () {
  alert('你的网络似乎出了一些问题!')
}

打开chrome浏览器,打开控制台 => NetWork => 设置网络为 offline.

AJAX--无量境神秘<对超时和网络异常的处理>_第2张图片
再次发送请求,效果如下⬇️:


好啦~今天的文章分享就到这里了,如果有疑问或者文章出现错误的话请一定要联系我哟~

非常感谢你的阅读,你的支持将会是我最大的动力

关注✨点赞收藏

回见~

AJAX--无量境神秘<对超时和网络异常的处理>_第3张图片

你可能感兴趣的:(【前端基础】--克莱因,#,【AJAX】--无量,JavaScript,网络,ajax,javascript,前端,node.js)