使用递归重试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方法以获得更好的结构。