javascript - 如何在for循环中使用angular 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 resolve 的目的:

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 放在您的函数之前。看这个demo on StackBlitz .