Angular 5:序列化API调用

Question

我如何等待API完成，然后再发送相同的API请求？

我有一种表格，当用户输入某些内容时，我会调用API。当用户更新输入时，我想等到以前的API调用完成。

我正在使用Angular 5。

例如，如果我有以下操作，并且我两次触发onclick，我希望第二个呼叫仅在第一个完成后才发起。

component:
onClick() {
   this.http.post(this.url, payload, options); 
 }

我如何使用FlatMapWithMaxConcurrent实现这一目标？

Answer 1

如果呼叫的顺序很重要，则可以使用Concat合并两个API调用。

const结果= callone.concat（calltwo）;

结果。

我想您只是在寻找类似的东西：

class MyComponent {
    lastCall: Observable
    onClick() {
        let newCall = this.http.post(url); 
        if (this.lastCall) {
            this.lastCall = this.lastCall.concat(newCall)
        }
        else {
            this.lastCall = newCall
        }
        return this.lastCall
    }
}

这可以跟踪成员lastCall中任何先前拨打的呼叫。用户第一次单击时，它将为null，该方法将简单地返回帖子的结果。但是，第二次该方法将返回可观察到的结果，这是首先执行上一个呼叫的结果，然后是新调用。如果旧呼叫终止，将立即执行新呼叫，但否则它将等待前一个终止。

但是，我不确定这实际上是您要寻找的行为。如果用户单击多次并且后端速度很慢，那么在用户停止单击后很长时间会有很多一个接一个的电话。

。

我认为您更有可能要跟踪呼叫是否已经进行，如果是呼叫，请忽略任何进一步的点击，直到终止。例如，如果后端缓慢，则可以防止用户意外地提交某些东西，并且由于前端停止响应而再次单击。

您可以通过以下方式实现这一目标：

class MyComponent {
  isPosting: boolean
  onClick() {
    if (this.isPosting) {
      return
    }
    this.isPosting = true
    return this.http.post(url)
      .finally(() => this.isPosting = false)
  }
}