Angular RxJs Observable 避免请求，直到我得到先前的响应答案

【问题标题】：Angular RxJs Observable Avoid Request until i get Previous ResponseAngular RxJs Observable 避免请求，直到我得到先前的响应
【发布时间】：2020-04-09 23:58:34
【问题描述】：

我的工厂是

public InsertUpdateTemp(sysObj): Observable<any> {
        return this.http.post(this.appSettings.API_Config '/saveEntryTmp', sysObj)
    }

这是我的电话

  this.saveservice.InsertUpdateTemp(TempSaveUpdate).subscribe(RtnData => {
          //ok response
     },error => {
          //error response
  })

我的工厂工作正常，正确保存数据

我的问题是假设如果我的服务器响应很慢，它将再次发送请求，因此保存了两个条目如何避免这种情况并且在我之前的请求完成之前不允许另一个请求

我怎样才能做到这一点？ 我想在收到之前的回复之前避免请求

如果我的问题无法理解，请告诉我..

谢谢

【问题讨论】：

查看 concatMap

标签： javascript angular api rxjs observable

【解决方案1】：

您可以使用全局变量（例如：isWaitingResponse，默认情况下为 false）。

然后在你的函数中：

if(!this.isWaitingResponse) {
  this.isWaitingResponse = true;
  this.saveservice.InsertUpdateTemp(TempSaveUpdate).pipe(
    finalize(() => this.isWaitingResponse = false)
  )subscribe(RtnData => {
          //ok response
     },error => {
          //error response
  })
}

Finalize 可以命名为 finally，这取决于你使用的 RxJS 版本正在使用。

【讨论】：

"rxjs": "^6.0.0",
那你需要使用finalize。请参阅弃用区域中的更改日志：github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/…

【解决方案2】：

您想要的实际上是一种“处理”您的保存操作的服务和一种将这些操作逐个“排队”以进行处理的方法的组合。下面的代码是没有AngularJs的RxJs，根据需要应用到自己的情况：

// somewhere in constructor of your singleton service
const saveDataSubject = new Subject();
saveDataSubject.pipe(
  concatMap((enqueuedItem) => this.http.post(this.appSettings.API_Config '/saveEntryTmp', enqueuedItem.data).pipe(
    tap(result => enqueuedItem.callback(undefined, result), error => enqueuedItem.callback(error,undefined)),
    catchError(err => empty()),
  )
)
.subscribe();

public InsertUpdateTemp(sysObj): Observable<any> {
  return new Observable(sub => {
    saveDataSubject.next({data: sysObj, callback: (err, result) => {
      if(err) {
        return sub.err(err);
      }
      sub.next(result);
      sub.complete();
    }});
  });
});

因为该服务是一个单例，它连接了一个更改流以持久保存到后端（使用主题）。 concatMap 的使用将确保更改将被一一处理。 catchError 只是为了防止在提交更改时出错，破坏 Observable 流，从而阻止您处理下一个要持久的值。

从入队操作中将值（或错误）返回到您的 InsertUpdateTemp 的被调用者中涉及到一些魔法 - 这是使用 Observable 完成的（以便实际“插入”队列中的数据在您订阅它之前是懒惰的）并且通过处理流调用的回调 - 由于您的InsertUpdateTemp()，它被转换回可观察值发射或错误发射。

【讨论】：