如何优雅地中断一个网络请求

在前端开发中,网络请求无处不在。但有时候,由于各种原因(如用户取消操作、页面跳转等),我们需要中断正在进行的网络请求(本文只针对前端实现)。那么,如何优雅地实现这一功能呢?本文将为你揭晓答案!

一、为什么要中断网络请求?

在前端开发中,我们经常需要发送各种网络请求以获取数据、上传文件或执行其他操作。然而,在请求过程中,可能会遇到以下情况:

  1. 用户取消了操作,此时不需要继续等待请求的响应。
  2. 页面进行了跳转,原来的请求已经不再需要。
  3. 网络请求超时,需要重试或取消。

在这些情况下,如果我们不中断网络请求,可能会导致以下问题:

  • 浪费网络资源和服务器资源。
  • 可能导致页面卡顿或性能下降。
  • 用户体验不佳,如页面跳转后仍在等待旧请求的响应。

因此,学会中断网络请求是前端开发中的一项重要技能。

二、如何中断网络请求?

在JavaScript中,我们可以使用XMLHttpRequest或Fetch API来发送网络请求。对于这两种方式,中断请求的方法略有不同。

  1. XMLHttpRequest

对于XMLHttpRequest对象,我们可以使用abort()方法来中断请求。示例代码如下:

var xhr = new XMLHttpRequest();
xhr.open('GET''https://api.example.com/data'true);
xhr.onreadystatechange = function({
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      // 处理响应数据
    } else {
      // 处理错误
    }
  }
};

// 假设在某个时刻,我们需要中断请求
xhr.abort(); // 调用abort方法中断请求
  1. Fetch API

对于Fetch API,由于其返回的是一个Promise对象,我们无法直接调用类似于abort()的方法来中断请求。但我们可以使用一些技巧来实现类似的功能。

一种常用的方法是使用AbortControllerAbortSignalAbortController提供了一个signal属性,该属性是一个AbortSignal对象。我们可以将signal对象作为参数传递给fetch请求的options对象。当需要中断请求时,我们可以调用AbortControllerabort()方法。示例代码如下:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // 处理响应数据
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      // 请求被中断
    } else {
      // 处理其他错误
    }
  });

// 假设在某个时刻,我们需要中断请求
controller.abort(); // 调用abort方法中断请求
  1. axios

在使用axios进行网络请求时,中断请求的需求同样存在。axios提供了几种方法来优雅地中断正在进行的网络请求。以下是具体的方法:

  1. 使用CancelToken

在axios的早期版本中(如v0.22.0之前),我们可以使用CancelToken来中断请求。这包括使用CancelToken.source()方法创建一个取消源,然后将该源的token作为请求配置的一部分传递给axios。

  • 创建一个取消源:
 const CancelToken = axios.CancelToken;
 const source = CancelToken.source();
  • 发送请求时传入取消令牌:
 axios.get('/user/12345', {
   cancelToken: source.token
 }).catch(function (thrown{
   if (axios.isCancel(thrown)) {
     console.log('请求被取消:', thrown.message);
   } else {
     // 处理错误
   }
 });
  • 当需要取消请求时,调用 source.cancel()
 source.cancel('用户取消了请求');
  1. 使用构造函数形式

除了使用CancelToken.source()方法外,我们还可以通过构造函数形式来创建取消令牌和取消函数。

  • 发送请求时传入取消函数:
 const CancelToken = axios.CancelToken;
 let cancel;
 axios.get('/user/12345', {
   cancelTokennew CancelToken(function executor(c{
     // 取消函数作为参数传入
     cancel = c;
   })
 });
  • 当需要取消请求时,直接调用 cancel()
cancel();
  1. 使用AbortController

从axios的v0.22.0版本开始,支持了使用AbortController来中断请求。这是一个现代且更加灵活的方法。

  • 创建一个 AbortController实例:
 const controller = new AbortController();
  • 发送请求时传入 signal属性:
 axios.get('/user/12345', {
   signal: controller.signal
 }).then(function (response{
   // 处理响应
 }).catch(function (error{
   if (error.name === 'AbortError') {
     console.log('请求被中止');
   } else {
     // 处理其他错误
   }
 });
  • 当需要取消请求时,调用 controller.abort()
 controller.abort();

三、总结

中断网络请求是前端开发中的一项重要技能。通过合理地中断请求,我们可以避免浪费资源、提高页面性能和用户体验。希望本文对你有所帮助!

本文由 mdnice 多平台发布

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

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

相关文章

C++学习笔记“类和对象”:多态;

目录 4.7 多态 4.7.1 多态的基本概念 4.7.2 多态案例--计算器类 4.7.3 纯虚函数和抽象类 4.7.4 多态案例二 - 制作饮品 4.7.5 虚析构和纯虚析构 4.7.6 多态案例三-电脑组装 4.7 多态 4.7.1 多态的基本概念 多态是C面向对象三大特性之一 多态分为两类 静志多态: 函数…

apex触发器满足条件时弹出对话框

在Salesforce中,Apex触发器是在记录的数据库操作(如插入、更新、删除)之前或之后执行的逻辑。由于Apex触发器运行在服务器端,无法直接触发客户端(浏览器)上的对话框。不过可以通过以下方法间接实现这一需求…

[ue5]建模场景学习笔记(6)——必修内容可交互的地形,交互沙(4)

1.需求分析: 现在我们已经有了可以在世界内近于无限的跑动痕迹,现在需要对痕迹进行细化,包括例如当人物跳起时便不再绘制痕迹,以及痕迹应该存在深浅,应该由两只脚分别绘制,同时也应该对地面材质进行进一步处…

程序性能分析:工具与策略

在软件开发中,程序性能分析是一个至关重要的环节。无论是为了确保代码的正确性,还是为了提高程序的运行效率,性能分析都是不可或缺的。本文将介绍程序性能分析的策略以及一系列性能分析和内存检查工具。 一、性能分析的策略 先保证正确性&a…

Vue基本使用-02

上节我们讲了什么是mvvm模型,以及我们vue的一些常用指令,今天给大家讲一下vue的基本使用,在将之前我们需要重点讲解我们的一个指令,v-model指令 v-model v-model 可以在组件上使用以实现双向绑定,什么是双向绑定呢?意思就是当我们…

景芯SoC A72的时钟树分析

innovus的ctslog中的Clock DAG信息可以报出来CTS主要运行步骤的关键信息,比如clustering,balancing做完后的clock tree的长度,clock tree上所用的buffer、inverter,icg cell数量,clock skew等信息。我们以景芯SoC A72 …

wordpress站群搭建2代码初始化

海鸥技术下午茶-wordpress站群搭建2项目代码初始化 1.后端环境 项目框架使用 go-zore https://go-zero.dev/docs/tasks 集成了各种工程实践的 web 和 rpc 框架。含极简的 API 定义和生成工具 goctl,可以根据定义的 api 文件一键生成 Go。可以很大程度上提高开发效…

代码随想录算法训练营第三十六天|LeetCode56 合并区间、LeetCode738 单调递增的数字

题1: 指路:56. 合并区间 - 力扣(LeetCode) 思路与代码: 相似于昨天的引爆气球(第三题),这个题的题意更为清晰。我们只要取有交集元素的并集区间即可,其他区间照常返回。同样,我们…

React Router 路由详解

文章目录 1. 安装 react-router-dom2. 创建路由3. 创建链接和导航4. 渲染路由参数和查询字符串 在React中,我们通常使用 react-router-dom 这个库来处理路由。 1. 安装 react-router-dom 首先,你需要安装 react-router-dom ,可以使用 npm 或…

Centos离线安装Python3

目录 1.准备工作 2.解压python压缩包 3.编译 4.安装、更改环境变量 5.建立pip连接 使用的是Centos7服务器,Py版本是py3.9.0 1.准备工作 首先确保服务器中存在相关的编译器,例如GCC;这里不做过多叙述,需要者前往&#xff1a…

自动化压测工具开发(MFC)

1. 背景 为了减轻测试人员在进行MFC程序压力测试时的重复手动操作,本文档描述了开发一个自动化压力测试工具的过程。该工具能够根据程序界面某块区域的预定状态变化,自动执行鼠标点击或键盘输入操作。 2. 技术概览 串口控制:用于控制外部设…

空间搜索geohash概述;redis的geo命令

概述 通常在一些2C业务场景中会根据用户的位置来搜索一些内容。通常提供位置搜索的都是直接通过redis/mongodb/es等中间件实现的。 但是这些中间件又是怎么实现位置搜索的呢; 查了一番资料,发现背后一个公共的算法Geohash。 搜索的时候可以根据距离对…

Vitis HLS 学习笔记--移除内存分配malloc

目录 1. 简介 2. 示例解析 2.1 源码解释 2.2 malloc 分析 2.3 替代方案分析 3. 总结 1. 简介 Vitis HLS 也不支持动态创建或删除 C/C 对象(用于综合)。 本文探究如何在C/C代码中避免使用显式的malloc函数来分配内存。在硬件设计和FPGA开发中&…

Xcode无法使用设备:Failed to prepare the device for development

问题: Xcode无法使用设备开发,失败报错如下: Failed to prepare the device for development. This operation can fail if the version of the OS on the device is incompatible with the installed version of Xcode. You may also need…

致 粉丝de信

致 粉丝 -本文呢看不下去别看,但是学业是真的重要(平常有信奥😫),电脑没收……更新可能得到暑假, 同学:小没苯agoe (aaa,学霸!!!&…

GGML简单介绍

GGML是一个用于机器学习的张量库,可以在商用硬件上实现大型模型和高性能。它被llama.cpp和whisper.cpp使用 C语言编写 16位浮点支撑 整数量化支持(如4位、5位、8位) 自动分化 内置优化算法(如ADAM, L-BFGS) 针对苹果芯片进行优化 在x86架构上利用AVX / AVX2的内在特…

A股上市公司MSCI ESG评级面板数据(2017-2023)

数据简介:MSCI ESG(Environmental, Social, and Governance)评级是由 MSCI Inc. 提供的一项服务,旨在评估公司在环境、社会和治理方面的表现。MSCI 是一家全球领先的投资研究和指数提供商,其 ESG 评级被广泛用于评估企…

C++ Primer 第五版 第16章 模板与泛型编程

模板是C中泛型编程的基础。一个模板就是一个创建类或函数的蓝图或者说公式。当使用一个vector这样的泛型类型,或者find这样的泛型函数时,我们提供足够的信息,将蓝图转换为特定的类或函数。这种转换发生在编译时。 一、定义模板 1. 函数模板…

windows11 建立批处理bat文件来删除指定目录下的所有隐藏的文件。

今天在导入项目的时候发现之前项目中的文件夹中有很多隐藏的临时文件,这个文件应该是版本控制产生的,导致导入后文件夹上有X,然后里面文件是一个没有错。 我们来建立一个bat来,进行批量删除隐藏文件就可以了: echo o…

安装前端与Web前端:深度探索与实践

安装前端与Web前端:深度探索与实践 在数字化时代,前端技术作为用户界面的直接呈现者,其重要性不言而喻。然而,对于初学者而言,安装前端与Web前端的过程往往充满了困惑与挑战。本文将从四个方面、五个方面、六个方面和…