Merge pull request #393 from nextcloud/fix/cancelable_request
Use cancelable request
This commit is contained in:
commit
314a4110fd
|
@ -133,6 +133,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'
|
||||||
|
@ -174,6 +175,9 @@ export default {
|
||||||
errorForm: false,
|
errorForm: false,
|
||||||
|
|
||||||
isDragging: false,
|
isDragging: false,
|
||||||
|
|
||||||
|
// storage for axios cancel function
|
||||||
|
cancelFetchFullForm: () => {},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -207,7 +211,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)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -234,16 +237,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