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

目录

注意:

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>
相关推荐
Boilermaker19922 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子13 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102428 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y44 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构