使用AngularJS同步API请求队列

pdtvr36n  于 2022-12-17  发布在  Angular
关注(0)|答案(1)|浏览(167)

我尝试使用AngularJS创建API请求的同步队列。

class x {
    public y() {
        ...
        restRequest();
    }
}

我有这个类,我有一些白色画布。当我把一些实体放在画布上时,方法y调用。
所以例如,我快速拖放了5个实体。它为我创建了5个API请求。
我想将restRequest添加到某个同步队列,当我丢弃5个实体时,它将是5个请求的队列,请求1将开始,当它完成时,下一个请求将开始,等等...(同步队列)。
我尝试了这个代码:

class x {
    private queue: object = {};
    
    public y() {
        const uniqueId: number = Date.now();
        
        let queueIsEmpty = _.isEmpty(this.queue);
        
        const func = setInterval(() => {
            if(queueIsEmpty) {
                this.queue[uniqueId] = true;
                clearInterval(func);
                restRequest();
            }
            queueIsEmpty = _.isEmpty(this.queue);
        }, 1000);
    }
    
    private restRequest() {
        
    }
}

但这段代码是错误的,因为有竞争,如果我拖放5个实体,有这样的情况下,第一个完成后,它进入块4次在一起。
那么,我如何创建API请求的同步队列?tnx很多

9jyewag0

9jyewag01#

这很简单:

futureRequestData = [];
running = false;

add(data) {
  if (this.running) {
    this.futureRequestData.push(data); // record request for future
  } else {
    this.makeRequest(data); // run request
  }
}

makeRequest(data) {
  this.running = true;
  return this.$http.get(...).then(() => {
    this.running = false;
    this.onRequestCompleted()
  }); // what to do on error - up to u
}

onRequestCompleted() {
  // if there is more, run next
  if (futureRequestData.length) {
      this.makeRequest(futureRequestData.shift());
  }
}

相关问题