Refactor: Use a global AbortController to cancel requests on route changes

Signed-off-by: Marcel Klehr <mklehr@gmx.net>

Author: marcelklehr

package-lock.json

@@ -48,6 +48,7 @@
 		"debounce": "^1.2.1",
 		"he": "^1.2.0",
 		"jest-environment-jsdom": "^28.1.1",
+		"p-queue": "^7.3.0",
 		"path-posix": "^1.0.0",
 		"qs": "^6.11.0",
 		"url-parse": "^1.5.10",

package.json

@@ -103,10 +103,6 @@ export default {
 		await this.fetchFiles()
 	},
 
-	beforeDestroy() {
-		this.cancelFilesRequest('Changed view')
-	},
-
 	methods: {
 		async fetchFiles() {
 			await this.fetchFaceContent(this.face.basename)

src/components/FaceCover.vue

@@ -32,8 +32,8 @@
 import { mapGetters } from 'vuex'
 
 import getAlbumContent from '../services/AlbumContent'
-import cancelableRequest from '../utils/CancelableRequest'
 import FolderTagPreview from './FolderTagPreview'
+import * as RequestHandler from '../services/RequestHandler'
 
 export default {
 	name: 'Folder',
@@ -52,7 +52,6 @@ export default {
 
 	data() {
 		return {
-			cancelRequest: null,
 			previewFolder: this.item.injected.fileid,
 		}
 	},
@@ -101,31 +100,19 @@ export default {
 		}
 	},
 
-	beforeDestroy() {
-		// cancel any pending requests
-		if (this.cancelRequest) {
-			this.cancelRequest('Navigated away')
-		}
-	},
-
 	methods: {
 		async getFolderData(filename) {
-			// init cancellable request
-			const { request, cancel } = cancelableRequest(getAlbumContent)
-			this.cancelRequest = cancel
-
 			try {
 				// get data
-				const { folder, folders, files } = await request(filename, { shared: this.item.injected.showShared })
+				const { folder, folders, files } = await RequestHandler.queue.add(() =>
+					getAlbumContent(filename, { shared: this.item.injected.showShared })
+				)
 				this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
 				this.$store.dispatch('updateFiles', { folder, files, folders })
 			} catch (error) {
 				if (error.response && error.response.status) {
 					console.error('Failed to get folder content', filename, error.response)
 				}
-				// else we just cancelled the request
-			} finally {
-				this.cancelRequest = null
 			}
 		},
 

src/components/Folder.vue

@@ -33,8 +33,8 @@
 import { mapGetters } from 'vuex'
 
 import getTaggedImages from '../services/TaggedImages'
-import cancelableRequest from '../utils/CancelableRequest'
 import FolderTagPreview from './FolderTagPreview'
+import * as RequestHandler from '../services/RequestHandler'
 
 export default {
 	name: 'Tag',
@@ -51,12 +51,6 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			cancelRequest: null,
-		}
-	},
-
 	computed: {
 		// global lists
 		...mapGetters([
@@ -78,29 +72,16 @@ export default {
 		},
 	},
 
-	beforeDestroy() {
-		// cancel any pending requests
-		if (this.cancelRequest) {
-			this.cancelRequest('Navigated away')
-		}
-	},
-
 	async created() {
-		// init cancellable request
-		const { request, cancel } = cancelableRequest(getTaggedImages)
-		this.cancelRequest = cancel
-
 		try {
 			// get data
-			const files = await request(this.item.injected.id)
+			const files = await RequestHandler.queue.add(() => getTaggedImages(this.item.injected.id))
 			this.$store.dispatch('updateTag', { id: this.item.injected.id, files })
 			this.$store.dispatch('appendFiles', files)
 		} catch (error) {
 			if (error.response && error.response.status) {
 				console.error('Failed to get folder content', this.item.injected.id, error.response)
 			}
-		} finally {
-			this.cancelRequest = null
 		}
 	},
 

src/components/Tag.vue

@@ -28,8 +28,8 @@ import { getCurrentUser } from '@nextcloud/auth'
 
 import client from '../services/DavClient.js'
 import logger from '../services/logger.js'
-import cancelableRequest from '../utils/CancelableRequest.js'
 import { genFileInfo } from '../utils/fileUtils.js'
+import * as RequestHandler from '../services/RequestHandler'
 
 export default {
 	name: 'FetchAlbumsMixin',
@@ -38,18 +38,13 @@ export default {
 		return {
 			errorFetchingAlbums: null,
 			loadingAlbums: false,
-			cancelAlbumsRequest: () => { },
 		}
 	},
 
 	async beforeMount() {
 		this.fetchAlbums()
 	},
 
-	beforeDestroy() {
-		this.cancelAlbumsRequest('Changed view')
-	},
-
 	computed: {
 		...mapGetters([
 			'albums',
@@ -66,11 +61,9 @@ export default {
 				this.loadingAlbums = true
 				this.errorFetchingAlbums = null
 
-				const { request, cancel } = cancelableRequest(client.getDirectoryContents)
-				this.cancelAlbumsRequest = cancel
-
-				const response = await request(`/photos/${getCurrentUser()?.uid}/albums`, {
-					data: `<?xml version="1.0"?>
+				const response = await RequestHandler.queue.add(() =>
+					client.getDirectoryContents(`/photos/${getCurrentUser()?.uid}/albums`, {
+						data: `<?xml version="1.0"?>
 							<d:propfind xmlns:d="DAV:"
 								xmlns:oc="http://owncloud.org/ns"
 								xmlns:nc="http://nextcloud.org/ns"
@@ -82,9 +75,9 @@ export default {
 									<nc:dateRange />
 								</d:prop>
 							</d:propfind>`,
-					details: true,
+						details: true,
+					}))
 
-				})
 				const albums = response.data
 					.filter(album => album.filename !== '/photos/admin/albums')
 					.map(album => genFileInfo(album))
@@ -121,7 +114,6 @@ export default {
 				logger.error(t('photos', 'Failed to fetch albums list.'), error)
 				showError(t('photos', 'Failed to fetch albums list.'))
 			} finally {
-				this.cancelAlbumsRequest = () => { }
 				this.loadingAlbums = false
 			}
 		},

src/mixins/FetchAlbumsMixin.js

@@ -27,9 +27,9 @@ import { getCurrentUser } from '@nextcloud/auth'
 
 import client from '../services/DavClient.js'
 import logger from '../services/logger.js'
-import cancelableRequest from '../utils/CancelableRequest.js'
 import DavRequest from '../services/DavRequest'
 import { genFileInfo } from '../utils/fileUtils'
+import * as RequestHandler from '../services/RequestHandler'
 
 export default {
 	name: 'FetchFacesMixin',
@@ -40,20 +40,13 @@ export default {
 			loadingFaces: false,
 			errorFetchingFiles: null,
 			loadingFiles: false,
-			cancelFacesRequest: () => { },
-			cancelFilesRequest: () => {},
 		}
 	},
 
 	async beforeMount() {
 		this.fetchFaces()
 	},
 
-	beforeDestroy() {
-		this.cancelFacesRequest('Changed view')
-		this.cancelFilesRequest('Changed view')
-	},
-
 	computed: {
 		...mapGetters([
 			'faces',
@@ -78,10 +71,8 @@ export default {
 				this.loadingFaces = true
 				this.errorFetchingFaces = null
 
-				const { request, cancel } = cancelableRequest(client.getDirectoryContents)
-				this.cancelFacesRequest = cancel
-
-				const faces = await request(`/recognize/${getCurrentUser()?.uid}/faces/`)
+				const faces = await RequestHandler.queue.add(() =>
+					client.getDirectoryContents(`/recognize/${getCurrentUser()?.uid}/faces/`))
 				this.$store.dispatch('addFaces', { faces })
 				logger.debug(`[FetchFacesMixin] Fetched ${faces.length} new faces: `, faces)
 			} catch (error) {
@@ -95,7 +86,6 @@ export default {
 				logger.error(t('photos', 'Failed to fetch faces list.'), error)
 				showError(t('photos', 'Failed to fetch faces list.'))
 			} finally {
-				this.cancelFacesRequest = () => { }
 				this.loadingFaces = false
 			}
 		},
@@ -113,15 +103,14 @@ export default {
 				this.errorFetchingFiles = null
 				this.loadingFiles = true
 
-				const { request, cancel } = cancelableRequest(client.getDirectoryContents)
-				this.cancelFilesRequest = cancel
-
-				let { data: fetchedFiles } = await request(
-					`/recognize/${getCurrentUser()?.uid}/faces/${faceName}`,
-					{
-						data: DavRequest,
-						details: true,
-					}
+				let { data: fetchedFiles } = await RequestHandler.queue.add(() =>
+					client.getDirectoryContents(
+						`/recognize/${getCurrentUser()?.uid}/faces/${faceName}`,
+						{
+							data: DavRequest,
+							details: true,
+						}
+					)
 				)
 
 				fetchedFiles = fetchedFiles
@@ -150,7 +139,6 @@ export default {
 				logger.error('Error fetching face files', error)
 			} finally {
 				this.loadingFiles = false
-				this.cancelFilesRequest = () => { }
 			}
 		},
 	},