vue.js - 在 VueJS 上递归发送 HTTP 请求

Question

我已经检查了很多地方来做到这一点。但是，没有找到任何解决方案。让我们假设，我们有任何方法的 HTTP post 请求。我正在尝试递归调用 HTTP post 请求。问题是，当我尝试使用 setInterval 函数执行此操作时，由于连接问题，队列中有一些请求挂起。当连接较低时，它会累积在队列中。我想要做的是，在发送最新请求之前不要发送请求。它的最佳实践是什么？

Answer 1

您可以创建一个返回 Promise 的函数，以及另一个函数，它解决了这个 Promise 并在 .then 回调中再次调用自己:

new Vue({
  el: '#app',
  data: {
    fetchCounter: 0 // used here to prevent infinite requests 
  },
  methods: {
    myFetch: function() {
      return fetch('https://jsonplaceholder.typicode.com/users/1/')
    },
    loopFetch: function() {
      this.myFetch().then(res => {
      	console.log(res.status, ' ', this.fetchCounter++);
        if (this.fetchCounter < 10) { // repeat 10 times, then abort
          setTimeout(this.loopFetch, 1000); // sort of debounce
        } else {
          console.log('aborted')
        }
      })
    }
  },
  mounted() {
    this.loopFetch(); // first call of the loopFetch function 
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"></div>