Use cancelable request
Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
This commit is contained in:
parent
6a52d83675
commit
37882116fc
|
@ -130,6 +130,7 @@ import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||||
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
||||||
|
|
||||||
import answerTypes from '../models/AnswerTypes'
|
import answerTypes from '../models/AnswerTypes'
|
||||||
|
import CancelableRequest from '../utils/CancelableRequest'
|
||||||
import EmptyContent from '../components/EmptyContent'
|
import EmptyContent from '../components/EmptyContent'
|
||||||
import Question from '../components/Questions/Question'
|
import Question from '../components/Questions/Question'
|
||||||
import QuestionLong from '../components/Questions/QuestionLong'
|
import QuestionLong from '../components/Questions/QuestionLong'
|
||||||
|
@ -171,6 +172,9 @@ export default {
|
||||||
errorForm: false,
|
errorForm: false,
|
||||||
|
|
||||||
isDragging: false,
|
isDragging: false,
|
||||||
|
|
||||||
|
// storage for axios cancel function
|
||||||
|
cancelFetchFullForm: () => {},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -204,7 +208,6 @@ export default {
|
||||||
watch: {
|
watch: {
|
||||||
// Fetch full form on change
|
// Fetch full form on change
|
||||||
hash() {
|
hash() {
|
||||||
// TODO: cancel previous request if not done
|
|
||||||
this.fetchFullForm(this.form.id)
|
this.fetchFullForm(this.form.id)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -231,16 +234,33 @@ export default {
|
||||||
*/
|
*/
|
||||||
async fetchFullForm(id) {
|
async fetchFullForm(id) {
|
||||||
this.isLoadingForm = true
|
this.isLoadingForm = true
|
||||||
|
|
||||||
|
// Cancel previous request
|
||||||
|
this.cancelFetchFullForm('New request pending.')
|
||||||
|
|
||||||
|
// Output after cancelling previous request for logical order.
|
||||||
console.debug('Loading form', id)
|
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 {
|
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)
|
this.$emit('update:form', form.data)
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
this.errorForm = true
|
|
||||||
} finally {
|
|
||||||
this.isLoadingForm = false
|
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 === '') {
|
if (this.form.title === '') {
|
||||||
this.focusTitle()
|
this.focusTitle()
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue