首页 > 其他分享 >vue在组件销毁的时候将异步请求撤销

vue在组件销毁的时候将异步请求撤销

时间:2024-04-01 18:26:31浏览次数:23  
标签:异步 vue 请求 FeatureLayer 组件 query queryFeatures 加载

背景

Vue 2 + ArcGIS JS
加载图层使用 FeatureLayer.queryFeatures(query) 对服务端执行地理数据查询请求。
该请求为 fetch 类型。

复现

Bug:刚打开专题A,未等加载完,点击快速切换到共用同一个地图的新专题B,地图却加载专题A的数据图层。

原因:由于地图还是用的同一个对象,且该函数FeatureLayer.queryFeatures(query)异步执行,当异步等待完成后,会继续执行原有的 then() 内容

解决

方法 1. Vue 声明变量标记组件是否被销毁

image

方法 2. 使用 AbortController 终止请求

image

参考:

标签:异步,vue,请求,FeatureLayer,组件,query,queryFeatures,加载
From: https://www.cnblogs.com/zheyi420/p/18109001

相关文章

  • QtQuick 学习笔记(一)容器组件
    1.QGroupBox功能提供分组框支持,可在其中布置多种窗口部件常用函数与组件voidsetChecked(boolchecked)QGroupBox使能voidsetTitle(constQString&title)标题文本设置效果及功能测试GroupBox.cpp#include<QApplication>#include<QDialog>#include......
  • vue3中播放flv流视频,以及组件封装超全
    实现以上功能的播放,只需要传入一个流的地址即可,当然组件也只有简单的实时播放功能下面直接上组件里面的flvjs通过npmiflv.js直接下载 <template><divclass="player"style="position:relative;"><pstyle="position:absolute!important;top:10px;lef......
  • 深入解析大数据体系中的ETL工作原理及常见组件
    **引言关联阅读博客文章:探讨在大数据体系中API的通信机制与工作原理关联阅读博客文章:深入理解HDFS工作原理:大数据存储和容错性机制解析**在当今数字化时代,大数据处理已经成为了企业成功的重要组成部分。而在大数据处理中,ETL(Extract,Transform,Load)是至关重要的一环,它......
  • 大屏可视化项目示例--基于Vue3+vite2+echart+mock+axios+dataV
    图例: 项目环境:Vite、Echarts、Npm、Node、axios、mock、vue3、dataV。项目地址:IofTV-Screen-Vue3:......
  • src文件夹别名配置-Vue
    修改vite.config.js文件import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//@ts-ignoreimportpathfrom'path'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],resolve:{......
  • 解析Apache Kafka:在大数据体系中的基本概念和核心组件
    关联阅读博客文章:探讨在大数据体系中API的通信机制与工作原理关联阅读博客文章:深入解析大数据体系中的ETL工作原理及常见组件关联阅读博客文章:深度剖析:计算机集群在大数据体系中的关键角色和技术要点关联阅读博客文章:深入理解HDFS工作原理:大数据存储和容错性机制解析引......
  • Vue — Vue3.0状态管理工具Pinia
    一、什么是Pinia?Pinia是一个专门为Vue3设计的状态管理库。它的目标是提供一种简单、直观的方法来管理Vue应用的状态,同时充分利用Vue3的响应式系统和组合式API。Pinia主要特点包括:基于Vue3:Pinia是专门为Vue3设计的状态管理库,充分利用了Vue3的响应式系统......
  • Vue tableList:<any>[]介绍
    letdata=reactive({tableList:<any>[]});在这段代码中,tableList:[]表示tableList是一个数组,数组中的元素类型可以是任意类型(即TypeScript中的any类型)。[]中的尖括号<>是TypeScript中的类型断言语法,用于指定数组的元素类型。表示任意类型,即可以是任何......
  • Vue3创建空对象方法及推荐
    当使用{}时,我们实际上是在告诉TypeScript将空对象断言为任意类型(any),从而绕过了类型检查。这种做法会失去类型安全性,但在某些特定情况下可能是一种解决方案。以下是示例代码和说明://使用<any>{}将空对象断言为any类型letobj=<any>{};//对空对象进行操作obj.f......
  • 基于vue的MOBA类游戏攻略分享平台的设计与实现|Springboot+Vue+ Mysql+Java+ B/S结构(
    本项目包含可运行源码+数据库+LW,文末可获取本项目的所有资料。现今,越来越多的人乐于选择一项合适的管理方案,但是普通用户往往受到管理经验地限制,这时MOBA类游戏攻略分享平台的崛起,大量游戏攻略进入人们生活,而MOBA类游戏攻略制无疑是游戏攻略管理的最好制度,在这样成功的管理模......