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

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

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

1.1 🥜案例

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

效果如下：

在服务器中设置一个定时器，模拟给服务器发送请求超时的情况，当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>


  
  
  
  请求超时与网络异常
  
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #90b;
    }
  



  点击发送请求
  
  
    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  {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*')
  setTimeout(() => {
    // 设置响应体    
    response.send('延时响应')
  }, 3000)
})

// 4.监听端口启动服务 
app.listen(8000, () => {
  console.log("服务已经启动，8000 端口监听中....")
})

2.2 🔧取消AJAX请求方法

当点击取消按钮时，调用abort()方法来取消请求

取消请求.html

DOCTYPE html>


  
  
  
  取消请求



  点击发送
  点击取消
  
    // 获取元素对象
    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()
    }
  

需要注意的是：前面我们使用了const的方法，进行对xhr进行声明，但是要注意const的值是不能改的，所以我们要首先使用let进行xhr=null的赋值，然后再对xhr = new XMLHttpRequest()。

2.3 🔩解决重复发送请求的问题

设置一个标识变量isSending，当点击发送按钮时，判断isSending的布尔值

  点击发送
  
    // 获取元素对象
    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
        }
      }
    }
  

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