Cancel previous request. Fix #123

src/modules/otus/components/Panel/PanelContent/PanelContent.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, onBeforeMount, onBeforeUnmount } from 'vue'
 import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
 import TaxonWorks from '../../../services/TaxonWorks'
 import ContentTopic from './PanelContentTopic.vue'
@@ -23,6 +23,7 @@ const props = defineProps({
 })
 
 const contents = ref([])
+const controller = new AbortController()
 
 const contentList = computed(() =>
   contents.value.reduce((acc, current) => {
@@ -36,19 +37,22 @@ const contentList = computed(() =>
   }, {})
 )
 
-watch(
-  () => props.otuId,
-  (id) => {
-    if (id) {
-      useOtuPageRequest('panel:content', () =>
-        TaxonWorks.getOtuContent(id)
-      ).then(({ data }) => {
-        contents.value = data
-      })
-    } else {
-      contents.value = []
-    }
-  },
-  { immediate: true }
-)
+onBeforeMount(() => {
+  useOtuPageRequest('panel:content', () =>
+    TaxonWorks.getOtuContent(props.otuId, {
+      params: {
+        extend: ['depiction']
+      },
+      signal: controller.signal
+    })
+  )
+    .then(({ data }) => {
+      contents.value = data
+    })
+    .catch((e) => {})
+})
+
+onBeforeUnmount(() => {
+  controller.abort()
+})
 </script>

src/modules/otus/components/Panel/PanelDescendants/Descendants.vue

@@ -54,7 +54,9 @@ watch(
 
     isLoading.value = true
     useOtuPageRequest('panel:descendants', () =>
-      TaxonWorks.getTaxonomy(props.otuId, { max_descendants_depth: 1 })
+      TaxonWorks.getTaxonomy(props.otuId, {
+        params: { max_descendants_depth: 1 }
+      })
     )
       .then(({ data }) => {
         taxonomy.value = data

src/modules/otus/components/Panel/PanelDescendants/DescendantsTree.vue

@@ -71,7 +71,9 @@ const loadDescendants = () => {
     return
   }
   TaxonWorks.getTaxonomy(props.taxonomy.otu_id, {
-    max_descendants_depth: 1
+    params: {
+      max_descendants_depth: 1
+    }
   }).then(({ data }) => {
     descendants.value = data.descendants
   })

src/modules/otus/components/Panel/PanelGallery/Gallery.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script setup>
-import { computed, onServerPrefetch, onMounted } from 'vue'
-import { useOtuStore } from '@/modules/otus/store/store'
+import { computed, onServerPrefetch, onMounted, onBeforeUnmount } from 'vue'
+import { useImageStore } from '../../../store/useImageStore'
 
 const props = defineProps({
   otuId: {
@@ -17,7 +17,7 @@ const props = defineProps({
   }
 })
 
-const store = useOtuStore()
+const store = useImageStore()
 const images = computed(() => store.images || [])
 
 onServerPrefetch(async () => {
@@ -29,4 +29,9 @@ onMounted(() => {
     store.loadImages(props.otuId)
   }
 })
+
+onBeforeUnmount(() => {
+  store.resetRequest()
+  store.$reset()
+})
 </script>

src/modules/otus/components/Panel/PanelMap/PanelMap.vue

@@ -58,8 +58,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useOtuStore } from '@/modules/otus/store/store'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useDistributionStore } from '@/modules/otus/store/useDistributionStore.js'
 import CachedMap from './CachedMap.vue'
 import OtuSearch from '../../Search/OtuSearch.vue'
 
@@ -83,7 +83,7 @@ const props = defineProps({
 const zoom = 2
 const isLoading = ref(true)
 const isOtuSearchVisible = ref(false)
-const store = useOtuStore()
+const store = useDistributionStore()
 
 const LEGEND = {
   AssertedDistribution: {
@@ -116,4 +116,9 @@ onMounted(() => {
     rankString: props.taxon.rank_string
   })
 })
+
+onBeforeUnmount(() => {
+  store.resetRequest()
+  store.$reset()
+})
 </script>

src/modules/otus/constants/index.js

@@ -1,2 +1,3 @@
-export * from './typeOrder'
 export * from './rankGroups'
+export * from './responseError'
+export * from './typeOrder'

src/modules/otus/constants/overviewLayout.js

@@ -1,4 +1,4 @@
-import { FAMILY_GROUP, GENUS_GROUP, SPECIES_GROUP } from './index.js'
+import { FAMILY_GROUP, GENUS_GROUP, SPECIES_GROUP } from './rankGroups.js'
 import PanelGallery from '../components/Panel/PanelGallery/Gallery.vue'
 import PanelTypeSpecimen from '../components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue'
 import PanelTypeDesignation from '../components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue'

src/modules/otus/constants/responseError.js

@@ -0,0 +1,3 @@
+export const RESPONSE_ERROR = {
+  CanceledError: 'CanceledError'
+}

src/modules/otus/helpers/useOtuPageRequest.js

@@ -1,4 +1,5 @@
 import { useOtuPageRequestStore } from '../store/request'
+import { RESPONSE_ERROR } from '../constants'
 
 export function useOtuPageRequest(key, requestFunction) {
   const store = useOtuPageRequestStore()
@@ -9,7 +10,9 @@ export function useOtuPageRequest(key, requestFunction) {
       store.setRequest(key, response)
     })
     .catch((error) => {
-      store.setRequest(key, error.response)
+      if (error.name !== RESPONSE_ERROR.CanceledError) {
+        store.setRequest(key, error.response)
+      }
     })
 
   return request

src/modules/otus/services/TaxonWorks.js

@@ -1,8 +1,8 @@
 import { makeAPIRequest } from '@/utils/request'
 
 export default class TaxonWorks {
-  static getTaxonNameCitations(taxonId) {
-    return makeAPIRequest.get(`/taxon_names/${taxonId}/inventory/catalog`)
+  static getTaxonNameCitations(taxonId, opt) {
+    return makeAPIRequest.get(`/taxon_names/${taxonId}/inventory/catalog`, opt)
   }
 
   static getOtu(id) {
@@ -17,12 +17,12 @@ export default class TaxonWorks {
     })
   }
 
-  static getTaxon(id) {
-    return makeAPIRequest.get(`/taxon_names/${id}`)
+  static getTaxon(id, opt) {
+    return makeAPIRequest.get(`/taxon_names/${id}`, opt)
   }
 
-  static summary(id) {
-    return makeAPIRequest.get(`/taxon_names/${id}/inventory/summary`)
+  static summary(id, opt) {
+    return makeAPIRequest.get(`/taxon_names/${id}/inventory/summary`, opt)
   }
 
   static getTaxonTypeDesignation(id) {
@@ -31,38 +31,32 @@ export default class TaxonWorks {
     })
   }
 
-  static getOtuImages(otuId, params = {}) {
-    return makeAPIRequest.get(`/otus/${otuId}/inventory/images.json`, {
-      params
-    })
+  static getOtuImages(otuId, opt) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/images.json`, opt)
   }
 
-  static getTaxonomy(otuId, params) {
-    return makeAPIRequest.get(`/otus/${otuId}/inventory/taxonomy.json`, {
-      params
-    })
+  static getTaxonomy(otuId, opt) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/taxonomy.json`, opt)
   }
 
   static getOtuTypeMaterial(otuId) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/type_material.json`)
   }
 
-  static getOtuDistribution(otuId) {
-    return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution.json`)
+  static getOtuDistribution(otuId, opt = {}) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution.json`, opt)
   }
 
   static getOtuGeoJSONDistribution(otuId) {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/distribution.geojson`)
   }
 
-  static getCachedMap(cachedId) {
-    return makeAPIRequest.get(`/cached_maps/${cachedId}`)
+  static getCachedMap(cachedId, opt) {
+    return makeAPIRequest.get(`/cached_maps/${cachedId}`, opt)
   }
 
-  static getOtuContent(otuId) {
-    return makeAPIRequest.get(`/otus/${otuId}/inventory/content`, {
-      extend: ['depiction']
-    })
+  static getOtuContent(otuId, opt) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/content`, opt)
   }
 
   static getCachedMap(id) {

src/modules/otus/store/actions/index.js

@@ -1,4 +1,3 @@
 export * from './loadCatalog'
-export * from './loadDistribution'
 export * from './loadTaxonomy'
 export * from './loadCachedMap'

src/modules/otus/store/actions/loadCatalog.js

@@ -2,11 +2,11 @@ import TaxonWorks from '../../services/TaxonWorks'
 import { useOtuPageRequest } from '../../helpers/useOtuPageRequest'
 
 export const actionLoadCatalog = {
-  async loadCatalog(taxonId) {
+  async loadCatalog(taxonId, { signal }) {
     this.catalog.isLoading = true
 
     const response = await useOtuPageRequest('taxonomy', () =>
-      TaxonWorks.getTaxonNameCitations(taxonId)
+      TaxonWorks.getTaxonNameCitations(taxonId, { signal })
     )
 
     this.catalog = {

src/modules/otus/store/actions/loadTaxonomy.js

@@ -1,10 +1,13 @@
 import TaxonWorks from '../../services/TaxonWorks'
 
 export const actionLoadTaxonomy = {
-  async loadTaxonomy(otuId) {
+  async loadTaxonomy(otuId, { signal }) {
     const { data } = await TaxonWorks.getTaxonomy(otuId, {
-      max_descendants_depth: 0,
-      extend: ['common_names']
+      params: {
+        max_descendants_depth: 0,
+        extend: ['common_names']
+      },
+      signal
     })
 
     this.taxonomy = {