当ngrx / data进行远程api调用时，如何避免net :: ERR_INSUFFICIENT_RESOURCES？

问题描述

我正在@ ngrx / data下更新很多记录，该记录在后台调用远程API来同步数据库和本地存储。

override fun onCreateViewHolder(parent: ViewGroup,viewType: Int): MyViewHolder {
    val inflater = LayoutInflater.from(parent.context)
    val itemView = inflater.inflate(R.layout.recycler_item,parent,false)
    val holder = MyViewHolder(itemView)

    val params = holder.frame.layoutParams as ConstraintLayout.LayoutParams
    params.matchConstraintMaxHeight = (parent.height * 0.6).toInt()
    holder.frame.layoutParams = params

    return holder
}

我遇到的问题是，远程API调用发生在我的代码之外，并且发生的速度如此之快，连接使浏览器不堪重负：

net :: ERR_INSUFFICIENT_RESOURCES

限制上述代码无济于事，因为远程API调用发生在我的控制范围之外。

我是否有办法限制ngrx /数据远程API调用，或者另一种解决此问题的方法？

解决方法

选项1

下面使用Observable的方法而不必先转换为Promise可以减少资源使用，试试看

  import { forkJoin } from 'rxjs'
  ...
  myFunction() {
     return forkJoin(dataList.map(entity => this.entitySvc
      .getEntityCollectionService(storeName)
      .upsert(entity)))
  }
 

注意：我们将返回一个Observable，因此您最初调用此Promise的位置将需要从.then()变为subscribe()

myFunction().subscribe()

选项2

如果以上方法仍无法解决，请尝试以下方法。该方法链接Observable，并且仅在前一个请求完成后才处理下一个请求。

注意：这可能会比较慢，您可能需要向用户指示操作进度

    this.dataList
      .pipe(
        tap(() => 0),tap(({ length }) => (this.totalItems = length)),flatMap(item => item)
      )
      .pipe(
        concatMap(entity =>
          this.entitySvc.getEntityCollectionService(storeName).upsert(entity)
        )
      )
      .pipe(tap(() => (this.progress += 1)))
      .subscribe({
        next: console.log
      });

See this Demo

,

我将使用mergeMap rxjs运算符，以便在服务器请求之间添加并发：

updateEntities(): Observable<any> {
  return from(dataList).pipe(
    mergeMap(entity => this.entitySvc
     .getEntityCollectionService(storeName)
     .upsert(entity),2)
  );
}

然后在需要时调用该函数：

this.updateEntities().subscribe();

请注意， mergeMap的并发参数值为2 ，这意味着将仅并行发送2个请求 ，从而防止了同时向服务器调用。您可以根据需要调整此数字。

PS：请记住，当您在Observable上调用Promise（）时，它将立即执行。