【前端AJAX】如何处理AJAX请求超时和网络异常？以及手动取消AJAX请求的方法

蜡笔雏田学前端

已于 2022-08-22 16:42:02 修改

阅读量5.7k

点赞数 6

分类专栏： AJAX 文章标签：前端 ajax 网络 javascript

于 2022-06-13 12:41:15 首次发布

本文链接：https://blog.csdn.net/xuxuii/article/details/125257594

版权

AJAX 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

1. 🐱‍👤AJAX请求超时和网络异常处理
2. 🔨如何手动取消AJAX请求

1. 🐱‍👤AJAX请求超时和网络异常处理

分析：当前端向后端发起数据请求时，后端一直没有返回响应结果，不可能让用户一直等待下去，所以当请求超过一定的时间，就要提示用户或者取消这个请求。

1.1 🥜案例

点击发送请求按钮，等待2s后，弹出网络异常的弹框
当在控制台断开网络时，弹出网络出现问题的弹框

效果如下：

在这里插入图片描述

在服务器中设置一个定时器，模拟给服务器发送请求超时的情况，当3s后返回响应结果。
server.js

// 1.引入express
const { 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 🔧请求超时的处理

在客户端设置超时2s（服务器3s之后才会返回响应结果），自动取消请求，并弹框告知用户网络异常。

const xhr = new XMLHttpRequest()
// 超时设置 2s 设置（超过2s请求取消）
xhr.timeout = 2000
// 超时回调
xhr.ontimeout = function () {
alert('网络异常，请稍后重试！！！')
}

1.3 🔩请求时网络异常的处理

分析：网络异常出现的原因可能是网络断开，但是我们不能让用户无限的等待，所以我们可以通过设置网络异常来提醒用户，网络出现了问题。

当无网络连接时（可以在控制台设置网络为 offline），调用网络异常的回调，并弹框告知用户网络有问题。

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

整体代码如下：

<!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>

2. 🔨如何手动取消AJAX请求

分析：取消请求发生在我们已经发送了请求，但是请求结果还没有返回给我们，这时我们可以设置取消请求。

2.1 🥜案例

当点击发送按钮，发送AJAX请求
当点击取消按钮，取消发送AJAX请求

效果如下:

在这里插入图片描述

还是和上述一样，在服务器中设置一个定时器，模拟给服务器发送请求超时的情况，当3s后返回响应结果。
server.js

// 1.引入express
const { 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 端口监听中....")
})

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>

需要注意的是：前面我们使用了const的方法，进行对xhr进行声明，但是要注意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>

今天的分享就到这里啦。✨
关注💖 点赞🤞 收藏🌹

蜡笔雏田学前端

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
4
评论
【前端AJAX】如何处理AJAX请求超时和网络异常？以及手动取消AJAX请求的方法

效果如下：在服务器中设置一个定时器，模拟给服务器发送请求超时的情况，当3s后返回响应结果。1.2 🔧请求超时的处理在客户端设置超时2s（服务器3s之后才会返回响应结果），自动取消请求，并弹框告知用户网络异常。1.3 🔩请求时网络异常的处理当无网络连接时（可以在设置网络为），调用网络异常的回调，并弹框告知用户网络有问题。整体代码如下：2. 🔨如何手动取消AJAX请求2.1 🥜案例效果如下:还是和上述一样，在服务器中设置一个定时器，模拟给服务器发送请求超时的情况，当3s后返回响应...
复制链接

扫一扫