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

目录

注意:

1、Axios实现

2、Fetch实现

3、XHR实现


注意:

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

1、Axios实现

<!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 = nullfunction 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实现

<!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 = nullfunction 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实现

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/56656.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

性能测试工具JMeter

本次使用的博客系统的url&#xff1a; http://8.137.19.140:9090/blog_edit.html 1. JMeter介绍 环境要求&#xff1a;要求java&#xff0c;jdk版本大于8&#xff1b; Apache JMeter 是 Apache 组织基于 Java 开发的压⼒测试⼯具&#xff0c;⽤于对软件做性能测试&#xff1b…

【Next.js 项目实战系列】06-身份验证

原文链接 CSDN 的排版/样式可能有问题&#xff0c;去我的博客查看原文系列吧&#xff0c;觉得有用的话&#xff0c;给我的库点个star&#xff0c;关注一下吧 上一篇【Next.js 项目实战系列】05-删除 Issue 身份验证 配置 Next-Auth​ 本节代码链接 具体内容可参考Authenti…

带新手用一套坦克大战搞定Java核心编程

有不少在校大学生朋友私信笔者&#xff0c;觉得现在的Java教程学的比较枯燥&#xff0c;有没有能学到基础知识同时还有做项目感觉的教程。因为笔者最早接触Java时学的是马士兵老师、韩顺平老师这样的大佬当时出的教程&#xff0c;尤其印象深刻的是二位大佬的坦克大战项目&#…

基于DSP+ARM+FPGA的电能质量分析仪的软件设计

软件设计是电能质量设备的核心内容&#xff0c;上述章节详细介绍了电能质量参数的 算法&#xff0c;并且通过仿真实验进行了验证&#xff0c;本章将结合现代电能质量监测设备需求实 现算法在实际电网中应用。根据设计的电能质量分析仪的需求分析&#xff0c;进行总体的 软件…

Java筑基之路:运算符深入(下)

&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d;&#x1f51d; &#x1f947;博主昵称&#xff1a;小菜元 &#x1f35f;博客主页…

华为开发者论坛入口

这个才是华为开发者论坛网址&#xff0c;被百度搜出的鸿蒙论坛搞死。 华为云论坛_云计算论坛_开发者论坛_技术论坛-华为云 (huaweicloud.com) 备份&#xff1a; https://bbs.huaweicloud.com/

芯科科技最新第三代无线开发平台全面提升人工智能和无线连接功能!

芯科科技展示人工智能在塑造无线连接技术未来发挥的作用 致力于以安全、智能无线连接技术&#xff0c;建立更互联世界的全球领导厂商Silicon Labs&#xff08;亦称“芯科科技”&#xff0c;NASDAQ&#xff1a;SLAB&#xff09;&#xff0c;日前在首届北美嵌入式世界展览会&…

计算机网络:数据链路层 —— 共享式以太网

文章目录 共享式以太网CSMA/CD 协议CSMA/CD 协议 的基本原理 共享式以太网的争用期共享式以太网的最小帧长共享式以太网的最大帧长共享式以太网的退避算法截断二进制指数退避算法 共享二进制以太网的信道利用率使用集线器的共享式以太网10BASE-T 共享式以太网 共享式以太网是当…

51单片机数码管循环显示0~f

原理图&#xff1a; #include <reg52.h>sbit dulaP2^6;//段选信号 sbit welaP2^7;//位选信号unsigned char num;//数码管显示的数字0~funsigned char code table[]{ 0x3f,0x06,0x5b,0x4f, 0x66,0x6d,0x7d,0x07, 0x7f,0x6f,0x77,0x7c, 0x39,0x5e,0x79,0x71};//定义数码管显…

yakit使用教程(四,信息收集)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言&#xff1a;yakit下载安装教程。 一&#xff0c;基础爬虫。 在新建项目或新建临时项目后&#xff0c;点击安全工具&#xff0c;点击基础爬虫。 此工具并不是为了爬取网站上的一…

navicat下载教程(包会的)

目录 一、下载navicat安装包 步骤1---试用版本 步骤2---下载windws系统的navicat​编辑 步骤3---查看安装包 二、安装navicat 三、唤醒navicat 四、成功唤醒navicat 官网地址&#xff1a;Navicat | 下载 Navicat Premium 14 天免费 Windows、macOS 和 Linux 的试用版 …

【Power Compiler手册】15.多角多模式设计中的功耗优化

多角多模式设计中的功耗优化 可以使用多个运行条件和多种模式进行综合的设计被称为多角多模式设计。Design Compiler Graphical工具扩展了拓扑技术,以分析和优化这些设计。 有关多角多模式技术支持的综合工具的更多信息,请参见以下主题: • 优化多角多模式设计 • 报告命…

Docker 教程三 (CentOS Docker 安装)

CentOS Docker 安装 Docker 支持以下的 64 位 CentOS 版本&#xff1a; CentOS 7CentOS 8 更高版本… 使用官方安装脚本自动安装 安装命令如下&#xff1a; curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun手动安装 1.卸载旧版本 较旧的 Docker 版…

[Linux] 创建可以免密登录的SFTP用户

本文主要包含: 创建新用户创建密钥对用于免密登录新用户将新建用户改造为SFTP用户为SFTP上传数据设置限速 1. 创建新用户 sudo useradd sftp_user sudo passwd sftp_user # 输入密码2. 创建密钥对 参考这篇文章 [Linux] 生成 PEM 密钥对实现服务器的免密登录 3. 将新建用户…

牛客习题—线性DP 【mari和shiny】C++

你好&#xff0c;欢迎阅读我的文章~ 个人主页&#xff1a;Mike 所属专栏&#xff1a;动态规划 mari和shiny mari和shiny ​ 分析: 使用动态规划的思路来解决。 思路&#xff1a; 分别统计s&#xff0c;sh&#xff0c;shy的数量即可。使用ss来统计字符s的数量&#xff0c;使…

在 Flutter鸿蒙next版本 中使用 if 语句和三元表达式进行视图逻辑判断

目录 写在前面 1. 使用 if 语句 1.1 使用 if 语句 1.2 使用多个条件 2. 使用三元表达式 2.1 简单示例 2.2 结合多条件判断 写在最后 最佳实践 写在前面 在 Flutter 开发中&#xff0c;构建动态和响应式的用户界面是一个核心任务。在显示视图时&#xff0c;我们经常需要…

基于Spring Boot REST API设计指南

在构建现代Web应用程序时&#xff0c;RESTful API已成为一种标准&#xff0c;使得不同的应用程序能够通过HTTP协议进行通信&#xff0c;实现资源的创建、读取、更新和删除等操作。Spring Boot作为一个功能强大的框架&#xff0c;能够轻松创建RESTful API。本文将详细介绍如何在…

Java 中方法参数传递的陷阱

前言 在编程过程中&#xff0c;我们经常会遇到一些看似简单却容易出错的问题。本文将通过一个具体的例子&#xff0c;探讨 Java 中方法参数传递的陷阱&#xff0c;并提供详细的解决方法。希望这篇文章能帮助你在未来的开发中避免类似的错误。 问题背景 假设我们的任务是计算…

ORA-65096:公用用户名或角色名无效

CREATE USER DATA_SHARING IDENTIFIED BY "Ab2"; Oracle建立用户的的时候&#xff0c;可能会出现一直提示 ORA-65096:公用用户名或角色名无效&#xff1b; 我查了一下&#xff0c;好像是 oracle 12版本及以上版本的特性&#xff0c;用户名必须加c##或者C##前缀才能创…

三勾软件/ java+springboot+vue3玖玖云电商ERP多平台源码

玖玖云ERP系统、支持多平台订单同步&#xff0c;仓库发货&#xff0c;波次拣货&#xff0c;售后服务&#xff0c;电商ERP一站式解决方案 项目介绍 玖玖云ERP系统基于javaspringbootelement-plusuniapp打造的面向开发的电商管理ERP系统&#xff0c;方便二次开发或直接使用。主…