[Vuejs]-Retry vue resource ajax calls using recursion

by

2👍

✅

You will need to refactor this because you are caching promise. The issue here is that Promises by nature will only complete once, resolving or rejecting. Therefore if your $http request does fail, your future calls to retry() will all also fail without calling the endpoint.

Try something like below:

component could be refactored to a mixin if you want to share it across components (rather than import { getOrderStatus } from '../shared')

data () {
    return {
        attempt: 0,
    }
}

methods: {

    showOrder () { // or whatever needs this

        this.getOrderStatus('order-123')
            .then((reponse) => this.showOrderStatus())
            .catch((reponse) => this.handleError(response))

    },

    getOrderStatus (order) {

        this.attempt = 0

        return 
            new Promise((resolve, reject) => this.callOrderEndpoint({
                order,
                resolve,
                reject,
            }))

    },

    callOrderEndpoint ({ order, resolve, reject }) {

        const url = `/orders/status/${order.id}`

        this.$http
            .get(url)
            .then((response) => {
                if (response.body.status === 'success') {
                    resolve()
                } else {
                    reject()
                }
            })
            .catch(response) => {
                if (this.attempt++ < 2) {
                    setTimeout(() => 
                        this.callOrderEndpoint({ order, resolve, reject }), 
                        5000))
                } else {
                    reject(response)
                }
            })

    },

    showOrderStatus () {

        // whatever this does

    },

    handleError (response) {

        console.error('fail')

    },

},

I thought a better way to go would be to return a Promise from getOrderStatus. This would allow you to move your success / fail methods to the then / catch methods for better structure.

👤GuyC

Leave a comment