Use cancelable request

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>

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()
 				}