【前端性能优化】如何取消http请求

这篇具有很好参考价值的文章主要介绍了【前端性能优化】如何取消http请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


【前端性能优化】如何取消http请求,前端架构师之路,前端,http,网络协议,http请求,取消http请求,性能优化

✍创作者:全栈弄潮儿
🏡 个人主页: 全栈弄潮儿的个人主页
🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区
📙 专栏地址,欢迎订阅:前端架构师之路

需要取消http请求的3种经典场景

  • 场景一:有一个实时搜索功能,每当用户输入内容改变的时候,就会去调用一个接口,返回搜索结果数据,如果第二次响应的速度可能会比第一次快,页面的内容先变成第二次的内容,再变成第一次的内容,这就造成了搜索结果不对的情况。除了做防抖节流,还需要取消上一次接口请求。

  • 场景二:当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没有返回,那么我们希望取消前一个页面的接口请求。

  • 场景三:某些操作耗时比较长,如果用户不想等待,取消了操作,也需要取消接口请求。

原生XMLHttpRequest取消http请求

let xhr = new XMLHTTPRequest(),
const method = 'GET',
const url = "https:xxx.com/users"
xhr.open(method,url,true);
xhr.send();

// 需要取消请求的地方
xhr.abort();  //取消请求

fetch取消http请求

fetch与XMLHttpRequest(XHR)类似,是ES6之后浏览器(除IE之外)默认支持的http操作函数。可惜不是默认支持abort操作。但我们可以通过AbortController来实现:

// 声明AbortController
let controller = new AbortController();

// 正常的http调用
fetch('https:xxx.com/users', { signal: controller.signal })
    .then(res => res.json())
    .then(response => {
        console.log(response);
    })
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('Fetch was aborted')
        } else {
            console.log('error', err)
        }
    })// 需要取消请求时,调用:
controller.abort()

实时搜索用户,取消上一次请求:

let controller;

const searchUsers = () => {
    controller && controller.abort();
    controller = new AbortController();
    const signal =  Controller.signal;
    // 正常的http调用
    fetch('https:xxx.com/users', { signal: controller.signal })
        .then(res => res.json())
        .then(response => {
            console.log(response);
        })
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Fetch was aborted')
            } else {
                console.log('error', err)
            }
        });
    }
}

axios取消http请求

const source = axios.CancelToken.source();

axios.get('https:xxx.com/users', {
  cancelToken: source.token
}).catch(function(err) {
  if (axios.isCancel(err)) {
    // handle our cancel operation
    console.log('Request canceled', err.message);
  } else {
    // handle real error here
  }
});

// 需要取消请求时,调用:
source.cancel('Operation canceled by the user.');

哪些情况需要取消HTTP请求

  1. 用户导航变化: 当用户在页面上进行导航或关闭页面时,取消不再需要的请求可以提高性能和减少不必要的网络开销。

  2. 异步操作: 在执行异步操作时,比如搜索建议或自动完成,如果用户继续输入新的内容,你可能会希望取消之前的请求,以确保仅处理最新的输入。

  3. 长时间请求: 对于较长时间的请求,例如大文件上传或下载,用户可能想要取消操作,避免等待太久。

取消http请求能带来哪些性能提升

  • 性能提升: 取消不必要的请求可以减轻服务器负担,提高应用性能。

  • 节省带宽: 对于大文件下载或上传,取消请求可以避免不必要的数据传输,节省用户的带宽。

  • 更好的用户体验: 在用户取消操作时,立即取消相关的请求可以提供更即时的反馈,增强用户体验。文章来源地址https://www.toymoban.com/news/detail-801607.html

到了这里,关于【前端性能优化】如何取消http请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • nodejs项目实战教程01——http服务和URL类,前端开发社招面试解答之性能优化

    需要在终端重新执行一次node app.js浏览器的内容才会刷新 4.如何获取url中的参数 ============================================================================ 4.1 URL类基础 建议大家可以先看看Node.js API文档中的url 网址部分,这里做简要说明。url字符串在nodejs的url模块,有两种解析API,其中旧版的

    2024年04月11日
    浏览(46)
  • 解决前端性能问题:如何优化大量数据渲染和复杂交互?

    ✨✨祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心!✨✨  🎈🎈作者主页: 喔的嘛呀🎈🎈 目录 引言 一、分页加载数据 二、虚拟滚动 三、懒加载 四、数据缓存 五、减少重绘和回流 六、优化图片和资源: 七、合并压缩文件 八、使用Web Workers  在前端开发

    2024年03月10日
    浏览(63)
  • webpack基础知识八:说说如何借助webpack来优化前端性能?

    一、背景 随着前端的项目逐渐扩大,必然会带来的一个问题就是性能 尤其在大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面卡顿甚至奔溃 一般项目在完成后,会通过webpack进行打包,利用webpack对前端项目性能优化是一个十分重要的环节 二、如何优

    2024年02月14日
    浏览(40)
  • 优化axios封装之配置使用AbortController取消重复请求 防止用户频繁操作调用接口

    当数据量过大请求缓慢时用户点击按钮或者tab标签页快速重复调用同一个请求时,会导致数据错乱,当只需要最新的请求数据,并且中断上一个重复请求时,可以利用axios的CancelToken去中断之前的请求。 ps:由于不是所有请求都需要这个逻辑 所以我封装的时候增加了请求配置项

    2024年02月03日
    浏览(57)
  • 网络通讯组件性能优化之路

    BIO为同步阻塞IO,blocking queue的简写,也就是说多线程情况下只有一个线程操作内核的queue,当前线程操作完queue后,才能给下一个线程操作; 问题 在BIO下,一个连接就对应一个线程,如果连接特别多的情况下,就会有特别多的线程,很费线程;在早期的时候,世界上的计算机

    2024年02月02日
    浏览(47)
  • 架构师进阶之路 - 架构优化为什么难

            目录 业务迭代和技术优化难以兼顾 缺少“上帝”视角思维 系统架构腐化 缺少架构师视角 系统迭代机制 设计规范把控 最近在组织团队内的系统架构优化,总而言之就是难,至于为什么难我这边总结了以下六个方面,记录一下自己的架构师进阶之路吧。😁 重要的事

    2024年02月12日
    浏览(54)
  • axios如何取消请求,其原理是什么?

    原文合集地址如下,有需要的朋友可以关注 本文地址 axios 可以通过创建一个 CancelToken 来取消一个请求,基本原理是: 创建一个 CancelToken 的实例,它有一个 executor 函数,可以通过调用 executor 参数中的 cancel 函数来取消请求。 在 axios 请求配置中指定 cancelToken 属性,将 CancelToken 实例

    2024年02月12日
    浏览(36)
  • MySQL夯实之路-查询性能优化深入浅出

    explain;show status查看服务器状态信息 减少子任务,减少子任务执行次数,减少子任务执行时间( 优,少,快 ) 1.访问了太多的行和列:确认应用程序是否在检索大量超过需要的数据。这通常意味着访问了太多的行,但有时候也可能是访问了太多的列。 2.分析了太多的数据

    2024年01月21日
    浏览(52)
  • GPU推理服务性能优化之路 | 得物技术

    随着CV算法在业务场景中使用越来越多,给我们带来了新的挑战,需要提升Python推理服务的性能以降低生产环境成本。为此我们深入去研究Python GPU推理服务的工作原理,推理模型优化的方法。最终通过两项关键的技术: 1.Python的GPU与CPU进程分离,2.使用TensorRT对模型进行加速,

    2023年04月23日
    浏览(48)
  • Elasticsearch 8.X 性能优化参考 —— 筑梦之路

    Elasticsearch 是实现用户无缝搜索体验的关键工具。它通过提供快速、准确和相关的搜索结果,彻底改变了用户与应用程序的互动方式。然而,要确保 Elasticsearch 部署达到最佳性能,就必须关注关键指标,并对诸如索引、缓存、查询、搜索以及存储等各种组件进行优化。 Elasti

    2024年02月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包