javascript - 嵌套的 Promise 结构顺序

Question

我正在尝试实现一些有点棘手的事情，因为我还不习惯 Promise。

我要填充 <Id, ObjectInfo> 的 map

我有两个 API 点:

• 一个得到所有用户
• 另一个获取给定 Id 的 ObjectInfo

这是我的:

const result: Map<string, String[]> = new Map();
return this.http.get(this.adress + '/', this.options).toPromise()
  .then((response) => {
    for (const id of response.json()){
      this.http.get(this.adress + '/' + id + '/properties').toPromise()
      .then((rep) => {
        result.set(id, rep.json());
        console.log('#1: ', result);
      }).catch(this.handleError)
    }
  })
  .then(() => console.log('#2: ', result))
  .then(() => result)
  .catch(this.handleError);

所以在这里，我希望在控制台中 #1 后跟 #2，但事实并非如此。我知道我应该尝试使用 Promise.all()但我真的不知道如何设置它，因为我是在嵌套循环中创建我的 Promise。

这是针对 Angular 项目的，到目前为止实际代码可以正常工作，但会抛出一个 ExpressionChangedAfterItHasBeenCheckedError。
为避免这种情况，更改我的 promise 函数应该可以解决问题。

Answer 1

这部分代码

.then((response) => {
  // <-- HERE -->
  // this function must return a promise

  for (const id of response.json()){
    // ...
  }
})
.then(() => {
  // right now, this function executes **before** the requests
  // in the promise above are resolved
});

必须返回解决其中所有单个 promise (循环中构建的 promise )的 promise ，以便 promise 链可以具有您想要的顺序 - 在继续之前等待循环中的所有 promise 。

在这里使用 Promise.all 是很自然的选择，只需将 for..of 替换为数组映射即可:

.then((response) => {
  return Promise.all(
    Array
      .from(response.json())
      .map(id => {
        return this.http.get(this.adress + '/' + id + '/properties')
          .toPromise()
          .then((rep) => {
            result.set(id, rep.json());
            console.log('#1: ', result);
          })
          .catch(this.handleError)
      })
  );
})
.then(...)