diff --git a/src/views/Create.vue b/src/views/Create.vue index a3cf37d..4b6551a 100644 --- a/src/views/Create.vue +++ b/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() }