我可以停止 forEach 直到我通过 promise-then 从服务器获取数据吗？

Question

我正在尝试使用promise-then 从服务器获取 img url，并在服务器中使用该 img url 更新其他对象。

但是，我无法更新数据，因为在下载 url 之前触发更新数据的功能，所以它返回null。

所以，我认为如果我可以停止运行 forEach 直到我得到 imgUrl，那么一切都会正常运行。

这是我的代码

---

store.service.ts

addStoreImgList(imgArr, storeName) {
  const menuUrls = this.getStoreMenuImgUrl(imgArr.imgList, storeName);
  const normalUrls = this.getStoreNormalImgUrl(imgArr.normalImgList, storeName);

  return {menuUrls, normalUrls};
}

getStoreMenuImgUrl(menuImg, storeName) {
  const menuUrls = [];
  menuImg.forEach(item => {
    const imgRef = this.storageRef.child(`store/menuImg/${storeName}/${item.name}`);
    imgRef.put(item).then((snapshot) => menuUrls.push(snapshot.downloadURL));
  }); // Can I stop menuImg.forEach until I get a data from server here?

  return menuUrls;
}

getStoreNormalImgUrl(normalImg, storeName) {
  const normalUrls = [];
  normalImg.forEach(item => {
    const imgRef = this.storageRef.child(`store/normalImg/${storeName}/${item.name}`);
    imgRef.put(item).then((snapshot) => normalUrls.push(snapshot.downloadURL));
  });

  return normalUrls;
}

---

edit-store.component.ts

const urls = this.storeService.addStoreImgList(imgArr, this.storeName);

---

如果您能提供更好的建议，我将不胜感激。 我实际上尝试在rxjs 中使用observable，但我不能。

谢谢！

Answer 1

使用“香草”承诺没有简单易行的方法来做到这一点。你可以做到，但它需要你建立一个 Promise 列表并将它们链接在一起。这种代码会很快变得非常丑陋和复杂。

执行此操作的最简单方法是利用 async await 语法。

您要查找的内容应如下所示：

async getStoreMenuImgUrl(menuImg, storeName) {
  const menuUrls = [];
  for (const item of menuImg) {
    const imgRef = this.storageRef.child(`store/menuImg/${storeName}/${item.name}`);
    const snapshot = await imgRef.put(item);
    menuUrls.push(snapshot.downloadURL);
  }

  return menuUrls;
}