首页 > 其他分享 >前端多次调用1个接口, 要最后一次请求的数据

前端多次调用1个接口, 要最后一次请求的数据

时间:2023-07-25 19:12:16浏览次数:37  
标签:调用 请求 data 前端 接口 lastRequestId getData 数据 ID

假设你要进行多次调用一个名为`getData()`的接口,并且你只关心最后一次请求的数据。你可以使用以下示例代码来实现:

 1 let lastRequestId = 0; // 记录最后一次请求的ID
 2 let lastResponse = null; // 记录最后一次请求的响应数据
 3 
 4 async function getData() {
 5   const requestId = Date.now(); // 生成一个唯一请求ID
 6 
 7   lastRequestId = requestId; // 记录最后一次请求ID
 8 
 9   try {
10     const response = await fetch('https://api.example.com/data'); // 发起接口请求
11     const data = await response.json(); // 获取请求响应的数据
12 
13     // 只保存最后一次请求的数据
14     if (requestId === lastRequestId) {
15       lastResponse = data;
16     }
17 
18     // 更新页面数据或进行其他操作
19     updatePageData(lastResponse);
20   } catch (error) {
21     // 处理请求错误
22     console.error('请求错误:', error);
23   }
24 }
25 
26 // 示例:连续点击多次调用getData()函数
27 // 只有最后一次请求的数据会被更新到页面上
28 for (let i = 0; i < 10; i++) {
29   getData();
30 }
31 
32 function updatePageData(data) {
33   // 更新页面数据的逻辑
34   console.log('最后一次请求的数据:', data);
35 }

 

在以上示例中,我们使用`lastRequestId`来记录最后一次请求的ID,每次请求时都将`lastRequestId`更新为当前的请求ID。在请求完成后,我们只会将最后一次请求的数据保存到`lastResponse`变量中,并将其传递给`updatePageData()`函数进行页面数据的更新。

这样,无论连续点击多少次`getData()`函数,只有最后一次请求的数据会被更新到页面上,其他请求的数据不会造成页面数据错乱的问题。

标签:调用,请求,data,前端,接口,lastRequestId,getData,数据,ID
From: https://www.cnblogs.com/liying66/p/17580735.html

相关文章

  • qt 调用JAVA
    Qt调用Java的流程要实现Qt调用Java,需要经过以下步骤:步骤描述1准备Java类2在Qt中配置Java环境3创建Java对象4调用Java方法下面将详细介绍每一步需要做什么,并给出相应的代码示例。步骤一:准备Java类首先,我们需要编写一个Java类,其中包含我们想要Qt调用的......
  • Redis循环慢接口优化
    原慢接口List<String>keys=newArrayList<>(Arrays.asList("1","2","3","4","5","6","7","8","9","10","11"));List<String>......
  • python使用ctypes调用gcc编译的dll之g++编译c++代码
    1、在windows系统将cpp代码编译成可供python调用的dll1.1新建header.h代码如下#pragmaonce#defineDllExport__declspec(dllexport)extern"C"{DllExportvoidhello_world(void);}/*#pragmaonce用来防止某个头文件被多次include,这条指令就能够保证头文件被......
  • web前端tips:js继承——原型链继承
    原型链继承原型链继承是JavaScript中实现继承的一种方式,它通过使用原型来实现对象之间的继承关系。在JavaScript中,每个对象都有一个原型(prototype),它是一个指向另一个对象的引用。当我们访问一个对象的属性时,如果该对象自身没有该属性,则会去它的原型上查找,如果原型上也没有,则......
  • 前端-antd table 分页器自定义
      按照时间排序, ......
  • C# 控制台服务 调用cmd命令 重启重启重启 服务器上的指定windows服务
    先贴核心重启服务命令(没错先停止再开启合并成一句话用&连接)CMD管理员运行,直接输入下面语句进行重启。netstoprabbitmq&netstartrabbitmq完整C#代码:参数ServiceName是配置的重启服务名称(后缀没有.exe,例:RabbitMQ)Process命名空间引用:usingSystem.Diagnostics......
  • 如何设计灵活的函数接口
     仅作为笔记使用 设计灵活的函数接口可以提高函数的可重用性和扩展性,使其更易于在不同的上下文中使用。以下是一些设计灵活函数接口的方法:1.使用参数对象:将相关的参数封装到一个参数对象中,而不是使用多个单独的参数。这样可以简化函数的参数列表,并且当需要添加新的参数时,......
  • MPO,LC,SC,光模块接口,DWDM,CWDM,MWDM,LWDM
    MPO细分:UPC、PC、APC,其中APC广电使用。 MPO是multi-fiberpulloff,MPO连接器又可以分为MPO/PC平面连接器和MPO/APC斜面连接器,光缆外皮有PVC材质与LSZH材质“OM”standforopticalmulti-mode,即光模式OM1指850/1300nm满注入带宽在200/500MHz.km以上的50um或62.5um芯径多模光......
  • 浏览器不需要安装插件,前端网页播放在线视频方案,hls协议下的h.265视频播放方案推荐
    一般我们播放本地视频都是使用video标签,但是<video>元素只支持三种视频格式:MP4、WebM、Ogg,对于在线视频直接使用video是没法播放的,这里介绍几款这两天我在做播放在线监控视频功能时使用过的几款播放器,初次接触流媒体踩了一堆坑,到目前为止对这部分内容都还了解的很浅显,若有问题请......
  • 使用 bat 脚本调用 powershell 脚本时遇到的问题
    如果powershell脚本中,有一些涉及相对路径的操作,会发现这样运行的powershell并不是在期望的目录中,需要重新设置一下当前工作目录:powershell-CommandSet-Location-LiteralPath"%cd%";".\test.ps1"通过Set-Location命令即可实现此需求。参考:https://stackoverflow.co......