Ajax取消重复请求和请求超时以及取消请求

Ajax的相关请求操作

express模拟请求接口

使用node server.js命令启动接口服务，后续的请求都基于此。

//server.js
//1、引入express
const express = require("express");
//2、创建应用对象
const app = express();
//3、创建路由规则
// request是对请求报文的封装
// response 是对响应报文的封装

// 请求超时
app.get("/delay", (request, response) => {
  // 获取get请求的参数
  console.log(request.query);
  // 设置响应头 防止跨域问题
  response.setHeader("Access-Control-Allow-Origin", "*");
  setTimeout(() => {
    response.send("请求超时，Hello Ajax!");
  }, 3000);
});

// 取消请求
app.get("/cancel", (request, response) => {
  // 获取get请求的参数
  console.log(request.query);
  // 设置响应头 防止跨域问题
  response.setHeader("Access-Control-Allow-Origin", "*");
  // 延时返回
  setTimeout(() => {
    response.send("取消请求，Hello Ajax!");
  }, 5000);
});

// 重复请求问题
app.get("/pardon", (request, response) => {
  // 获取get请求的参数
  console.log(request.query);
  // 设置响应头 防止跨域问题
  response.setHeader("Access-Control-Allow-Origin", "*");
  // 延时返回
  setTimeout(() => {
    response.send("重复请求，Hello Ajax!");
  }, 2000);
});

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

1、Ajax取消重复请求

• html部分

 <div>
      <button id="post">发起get请求</button>
      <div id="con"></div>
    </div>

• js文件部分

<script>
    // 获取节点
    const btn = document.getElementById("post");
    const odiv = document.getElementById("con");
    // 定义一个请求的变量
    let xhr = null
    // 是否有同一个请求正在发送的标识
    let flag = false
    // 绑定点击事件发起请求
    btn.onclick = function () {
      // 判断标识变量,如果有相同的请求正在发送就取消
      if(flag){ 
        xhr.abort()
      }
      
      xhr = new XMLHttpRequest();
      flag = true
      xhr.open("GET", "http://127.0.0.1:8888/pardon");
      xhr.send();

      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          flag = false
          if (xhr.status == 200) {
            // 处理结果
            console.log("状态码", xhr.status); //状态码
            console.log("状态字符串", xhr.statusText); //状态字符串
            console.log("所有响应头", xhr.getAllResponseHeaders); //所有响应头
            console.log("响应体", xhr.response); //响应体
            odiv.innerHTML = xhr.response;
          } else {
          }
        }
      };
    };
  
    
  
  </script>

2、请求超时

• html部分

<div>
 	<button id="post">请求超时</button>
  	<div id="con"></div>
</div>

• js部分

<script>
    // 获取节点
    const btn = document.getElementById("post");
    const odiv = document.getElementById("con");
    // 绑定点击事件
    btn.onclick = function () {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:8888/delay");
      //设置超时时间 2S没有响应发出提示信息
      xhr.timeout = 2000;
      xhr.ontimeout = function () {
        alert("请求超时，请稍后重试~");
      };

      // 网络异常问题,如断网
      xhr.onerror = function(){
        alert('您的网络不太好~')
      }

      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            // 处理结果
            console.log("状态码", xhr.status); //状态码
            console.log("状态字符串", xhr.statusText); //状态字符串
            console.log("所有响应头", xhr.getAllResponseHeaders); //所有响应头
            console.log("响应体", xhr.response); //响应体
            odiv.innerHTML = xhr.response;
          } else {
          }
        }
      };
    };
  </script>

3、取消Ajax请求

• html部分

 <div>
      <button id="post">发起get请求</button>
      <button id="cancel">取消请求</button>
      <div id="con"></div>
    </div>

<script>
    // 获取节点
    const btn = document.getElementById("post");
    const cancel = document.getElementById("cancel");
    const odiv = document.getElementById("con");
    // 定义一个请求的变量
    let xhr = null
    // 绑定点击事件发起请求
    btn.onclick = function () {
      xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:8888/cancel");
      xhr.send();
    };
  
    cancel.onclick = function(){
      console.log(11)
      xhr.abort()
      odiv.innerHTML = '请求已取消~'
    }
  
  </script>