Question

我尝试使用promise-then从服务器获取img url，并使用服务器中的img 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;
}

修改-store.component.ts

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

如果你能给出更好的建议，我将不胜感激。我实际上尝试在observable中使用rxjs，但我无法做到。

谢谢！

Answer 1

使用＆＃34; vanilla＆＃34;进行此操作并不是一种简单易行的方法。承诺。你可以做到这一点，但它需要你建立一个承诺列表并将它们链接在一起。这种代码可以快速实现丑陋和复杂。

最简单的方法是利用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;
}

我可以停止forEach直到我从承诺的服务器获取数据 - 然后吗？

1 个答案: