前端开发攻略---取消已经发出但是还未响应的网络请求

目录

注意:

1、Axios实现

2、Fetch实现

3、XHR实现


注意:

当请求被取消时,只会本地停止处理此次请求,服务器仍然可能已经接收到了并处理了该请求。开发时应当及时和后端进行友好沟通。

1、Axios实现

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="getData()">获取数据</button>
    <button onclick="cancel()">取消请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script>
    <script>
      // 创建一个取消令牌
      const CancelToken = axios.CancelToken
      // 用于存储取消函数
      let cancelFn = null
      function getData() {
        // 发起请求
        axios
          .get('http://127.0.0.1:3000/data', {
            cancelToken: new CancelToken(function executor(c) {
              cancelFn = c // 保存取消函数
            }),
          })
          .then(response => {
            // 请求成功时处理响应
            console.log('拿到数据:', response.data)
          })
          .catch(error => {
            // 处理错误
            if (axios.isCancel(error)) {
              // 如果是取消请求的错误,输出相关信息
              console.log('请求已取消:', error.message)
            } else {
              // 处理其他类型的请求错误
              console.error('请求失败:', error)
            }
          })
      }
      function cancel() {
        // 调用取消函数,传入取消的原因
        cancelFn && cancelFn('取消请求') // 取消请求
      }
    </script>
  </body>
</html>

2、Fetch实现

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="getData()">获取数据</button>
    <button onclick="cancel()">取消请求</button>
    <script>
      let controller = null
      function getData() {
        // 创建一个AbortController实例
        controller = new AbortController()
        // 发起请求
        fetch('http://127.0.0.1:3000/data', { signal: controller.signal })
          .then(response => {
            if (!response.ok) {
              throw new Error('获取数据失败')
            }
            return response.json()
          })
          .then(data => {
            console.log(data)
          })
          .catch(error => {
            if (error.name === 'AbortError') {
              console.log('Fetch请求已取消')
            } else {
              console.error('Fetch请求错误:', error)
            }
          })
      }

      function cancel() {
        controller && controller.abort() // 取消请求
      }

    </script>
  </body>
</html>

3、XHR实现

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="getData()">获取数据</button>
    <button onclick="cancel()">取消请求</button>
    <script>
      let xhr = null
      function getData() {
        // 创建一个新的 XMLHttpRequest 对象
        xhr = new XMLHttpRequest()
        // 配置请求
        xhr.open('GET', 'http://127.0.0.1:3000/data', true)
        // 定义回调函数
        xhr.onload = function () {
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log('响应结果:', xhr.responseText)
          } else {
            console.error('响应失败:', xhr.status)
          }
        }
        xhr.onerror = function () {
          console.error('请求失败')
        }
        // 发送请求
        xhr.send()
      }
      function cancel() {
        xhr && xhr.abort() // 取消请求
      }
    </script>
  </body>
</html>
相关推荐
Mike_jia5 分钟前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话6 分钟前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby7 分钟前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云9 分钟前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo10 分钟前
前端获取环境变量方式区分(Vite)
前端·vite
一千柯橘16 分钟前
Nestjs 解决 request entity too large
javascript·后端
土豆骑士21 分钟前
monorepo 实战练习
前端
土豆骑士22 分钟前
monorepo最佳实践
前端
见青..23 分钟前
【学习笔记】文件包含漏洞--本地远程包含、伪协议、加密编码
前端·笔记·学习·web安全·文件包含
举个栗子dhy37 分钟前
如何处理动态地址栏参数,以及Object.entries() 、Object.fromEntries()和URLSearchParams.entries()使用
javascript