重试vue资源AJAX使用递归调用

Question

如果最初失败，我正在尝试重试我的ajax调用。如果初始AJAX调用失败，则每次以5秒的暂停失败，则每次都可以执行3次。该函数正在我的VUE组件上作为方法导入，并在ready()

上被调用

export function getOrderStatus (order) {
  let url = `/orders/status/${order.id}`
  let promise = this.$http.get(url)
  function retry(order, path, promise, retryAttempt) {
    promise.then((response) => {
      if (response.body.status === 'success') {
        showOrderStatus()
      }
    }, (response) => {
      if (retries < 2) {
        retryAttempt++
        setTimeout(retry(order, path, promise, retryAttempt), 5000);
      } else {
        handleError()
      }
    })
  }
  retry(order, path, promise, 0)
}

组件

  import { getOrderStatus } from '../shared'
  export default {
   name: 'order-page',
   props: { order },
   methods: { getOrderStatus },
   ready() {
     this.getOrderStatus(order)
   }
 }

我不确定这是否是重试AJAX呼叫的最佳方法，因此任何建议都将不胜感激。

Answer 1

您需要重构，因为您正在缓存promise。这里的问题是，本质上的承诺只能完成一次，解决或拒绝。因此，如果您的$ http请求确实失败了，那么您对retry()的未来电话也会失败而无需调用端点。

尝试以下类似：

组件如果您想通过组件共享（而不是import { getOrderStatus } from '../shared'）

，则可以重构为Mixin

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')
    },
},

我认为更好的方法是从getOrderStatus回报承诺。这将使您可以将成功/失败方法移至当时的/捕获方法以获得更好的结构。