使用遞歸重試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'）

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

    }, 

}, 

我想到了一個更好的方式去分享它

組件可重構爲一個mixin會是從getOrderStatus返回承諾。這將允許你將你的成功/失敗方法轉移到then/catch方法以獲得更好的結構。