首页 > 其他分享 >如何避免同一时间接口多次重复请求

如何避免同一时间接口多次重复请求

时间:2024-08-10 16:06:25浏览次数:7  
标签:axios 请求 取消 多次重复 接口 cancelTokenSource error 同一时间

问题

当在项目中遇到一个场景,有一个tab页面,tab的切换调用的都是一个接口,只是传入的参数不同,这个时候接口返回很慢,短时间内多次切换tab栏,可能会造成数据渲染错误,页面多次刷新等问题

解决思路

在请求接口时,如果上个接口没有请求介绍,就取消掉上次接口的调用

实现

接口请求是通过axios发送HTTP请求,可以通过axios的取消令牌来实现这一要求。

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      cancelTokenSource: null, // 用于存储取消令牌源
    };
  },
  methods: {
    fetchData() {
      // 如果有之前的取消令牌源,则取消之前的请求
      if (this.cancelTokenSource) {  
        this.cancelTokenSource.cancel('Operation canceled by the user.');  
      }  
  
      // 创建一个新的取消令牌源  
      this.cancelTokenSource = axios.CancelToken.source();  
  
      // 发送请求,并传入取消令牌  
      axios.get('/some/path', {  
        cancelToken: this.cancelTokenSource.token  
      })  
      .then(response => {  
        console.log(response);  
      })  
      .catch(error => {  
        if (axios.isCancel(error)) {  
          console.log('Request canceled', error.message);  
        } else {  
          // 处理其他错误  
          console.error('Error:', error);  
        }  
      });  
    }  
  }  
};  
</script>

在使用中可以通过try,catch来捕获取消请求,以免在取消请求时控制台出现红色报错。

标签:axios,请求,取消,多次重复,接口,cancelTokenSource,error,同一时间
From: https://www.cnblogs.com/wang--chao/p/18352389

相关文章

  • 嵌入式硬件操作接口实现分享
    一、前言以STM32为例,打开网络上下载的例程或者是购买开发板自带的例程,都会发现应用层中会有stm32f10x.h或者stm32f10x_gpio.h,这些文件严格来时属于硬件层的,如果软件层出现这些文件会显得很乱。使用过Linux的童鞋们肯定知道linux系统无法直接操作硬件层,打开linux或者rt_threa......
  • Collection(接口)及对单个元素进行操作day12
    packagecom.shujia.day12;importjava.util.ArrayList;importjava.util.Collection;/*Collection:合层次结构中的根界面。集合表示一组被称为其元素的对象。一些集合允许重复元素,而其他集合不允许。】、有些被命令和其他无序。JDK不提供此接口的任何直接实现:它......
  • 接口自动化-YAPI+GITLAB+JENKINS+飞书畅想与实践
    起因工作中遇到期望做接口自动化,之前公司跟着团队做过python+request搭建的自动化框架,逐步完善框架本身,与接口测试用例本身,都是需要代码编写能力较强,能保证框架本身没问题,也要保证接口用例本身没问题。领导期望接口自动化能做到闭环,从代码产生开始到接口测试结果结束,都可以......
  • 易捷OA协同办公系统 ShowPic接口任意文件读取漏洞复现 [附POC]
    文章目录易捷OA协同办公系统ShowPic接口任意文件读取漏洞复现[附POC]0x01前言0x02漏洞描述0x03影响版本0x04漏洞环境0x05漏洞复现1.访问漏洞环境2.构造POC3.复现易捷OA协同办公系统ShowPic接口任意文件读取漏洞复现[附POC]0x01前言免责......
  • 万户OA ezOFFICE graph_include.jsp接口SQL注入漏洞复现 [附POC]
    文章目录万户OAezOFFICEgraph_include.jsp接口SQL注入漏洞复现[附POC]0x01前言0x02漏洞描述0x03影响版本0x04漏洞环境0x05漏洞复现1.访问漏洞环境2.构造POC3.复现0x06修复建议万户OAezOFFICEgraph_include.jsp接口SQL注入漏洞复现[附P......
  • 泛微E-office 10 schema_mysql接口敏感信息泄露漏洞复现 [附POC]
    文章目录泛微E-office10schema_mysql接口敏感信息泄露漏洞复现[附POC]0x01前言0x02漏洞描述0x03影响版本0x04漏洞环境0x05漏洞复现1.访问漏洞环境2.构造POC3.复现泛微E-office10schema_mysql接口敏感信息泄露漏洞复现[附POC]0x01前言......
  • 宝塔配置域名反向代理到ip+端口的接口地址
    宝塔配置域名反向代理到ip+端口的接口地址添加站点配置域名配置反向代理目标URL写服务器的本地ip地址127.0.0.1代理到9000端口上发关域名也写127.0.0.1或者$host申请https证书访问接口https://abc.baidu.com/xxx/xxx......
  • Nuxt3 axios封装 使用axios接口请求
    一、先安装axiosnpminstalladdaxios封装请求request.ts文件importaxiosfrom'axios'import{ElMessage,Message}from"element-plus"import{getToken}from'./token.js'constservice=axios.create({baseURL:'/api',//......
  • NVMe主机控制器,AMBA-AXI4-Stream接口,Xilinx FPGA,介绍手册
    NVMeA4SHostControllerIP1     介绍NVMeA4SHostControllerIP可以连接高速存储PCIeSSD,无需CPU和外部存储器,自动加速处理所有的NVMe协议命令,具备独立的数据写入AXI4-Stream/FIFO接口和数据读取AXI4-Stream/FIFO接口,适合于高性能、顺序访问的应用,比如视频记录、信号......
  • NVMe主机控制器,AMBA-AXI4接口,Xilinx FPGA,介绍手册
    NVMeAXI4HostControllerIP1     介绍NVMeAXI4HostControllerIP可以连接高速存储PCIeSSD,无需CPU,自动加速处理所有的NVMe协议命令,具备独立的数据写入和读取AXI4接口,不但适用高性能、顺序访问的应用,也适用于随机访问的应用,同时结合外部存储器(比如DDR),使得Host端的数......