From 37882116fc5eee274a1c5e905929ce28e8a65d83 Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Sat, 16 May 2020 14:22:01 +0200
Subject: [PATCH] Use cancelable request

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/views/Create.vue | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index 20ca96b..9ad2119 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -130,6 +130,7 @@ import Actions from '@nextcloud/vue/dist/Components/Actions'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 
 import answerTypes from '../models/AnswerTypes'
+import CancelableRequest from '../utils/CancelableRequest'
 import EmptyContent from '../components/EmptyContent'
 import Question from '../components/Questions/Question'
 import QuestionLong from '../components/Questions/QuestionLong'
@@ -171,6 +172,9 @@ export default {
 			errorForm: false,
 
 			isDragging: false,
+
+			// storage for axios cancel function
+			cancelFetchFullForm: () => {},
 		}
 	},
 
@@ -204,7 +208,6 @@ export default {
 	watch: {
 		// Fetch full form on change
 		hash() {
-			// TODO: cancel previous request if not done
 			this.fetchFullForm(this.form.id)
 		},
 
@@ -231,16 +234,33 @@ export default {
 		 */
 		async fetchFullForm(id) {
 			this.isLoadingForm = true
+
+			// Cancel previous request
+			this.cancelFetchFullForm('New request pending.')
+
+			// Output after cancelling previous request for logical order.
 			console.debug('Loading form', id)
 
+			// Create new cancelable get request
+			const { request, cancel } = CancelableRequest(async function(url, requestOptions) {
+				return axios.get(url, requestOptions)
+			})
+			// Store cancel-function
+			this.cancelFetchFullForm = cancel
+
 			try {
-				const form = await axios.get(generateUrl('/apps/forms/api/v1/form/{id}', { id }))
+				const form = await request(generateUrl('/apps/forms/api/v1/form/{id}', { id }))
 				this.$emit('update:form', form.data)
-			} catch (error) {
-				console.error(error)
-				this.errorForm = true
-			} finally {
 				this.isLoadingForm = false
+			} catch (error) {
+				if (axios.isCancel(error)) {
+					console.debug('The request for form', id, 'has been canceled.', error)
+				} else {
+					console.error(error)
+					this.errorForm = true
+					this.isLoadingForm = false
+				}
+			} finally {
 				if (this.form.title === '') {
 					this.focusTitle()
 				}