如何在for循环中保证带有角度http rest api的顺序？

Question

我正在尝试创建一个表单,允许您按顺序创建多个资源.

以下示例

Floor 1
Floor 2
Floor 3
...
Floor 9

---

代码的问题是订单不保证.

我的代码如下

let startAt = this.addAreasForm.controls['startAt'].value
const name = this.addAreasForm.controls['name'].value
const newArea = {name: name}

for (let i = 1; i < (amount + 1); i++) {
  newArea.name = name + ' ' + startAt
  startAt++
  this.areasService.createArea(newArea, parentId)
    .subscribe(
      area => this.added.emit(area)
    )
}

可以回来像

Floor 2
Floor 3
Floor 1
Floor 5
Floor 4

---

如何处理异步api调用以保证顺序顺序？

Answer 1

您可以将async/await用于 Promise 解析：

for (let i = 1; i < (amount + 1); i++) {
    await new Promise(resolve => {
        newArea.name = name + ' ' + startAt
        startAt++
        this.areasService.createArea(newArea, parentId)
            .subscribe(
                area => { 
                    this.added.emit(area);
                    resolve();
                });
        });
}

记得放在async你的函数之前。在 StackBlitz 上查看此演示。