Merge pull request #393 from nextcloud/fix/cancelable_request

Use cancelable request

src/views/Create.vue

@@ -133,6 +133,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'
@@ -174,6 +175,9 @@ export default {
 			errorForm: false,
 
 			isDragging: false,
+
+			// storage for axios cancel function
+			cancelFetchFullForm: () => {},
 		}
 	},
 
@@ -207,7 +211,6 @@ export default {
 	watch: {
 		// Fetch full form on change
 		hash() {
-			// TODO: cancel previous request if not done
 			this.fetchFullForm(this.form.id)
 		},
 
@@ -234,16 +237,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()
 				}