等待不做这项工作

Question

我在数组上得到了这个 map function：

foldersTreeImagesFiles.map( async (paragliderFolder) => {

        const pathfolder = pathImagesParaglider + '/' + paragliderFolder.subfolderName;
        const imagesUrl = await paragliderFolder.ImagesParagilder.reduce( async (UrlsImage, image, index) => {
            const pathImage = pathfolder + '/' + image;
            const folderCoulidinary = 'paraglider/' + paragliderFolder.subfolderName;

            const resu = await uploadImage(pathImage, folderCoulidinary);

            UrlsImage.name = paragliderFolder.subfolderName
            UrlsImage[`photo_${index}`] = resu;

            return UrlsImage

        }, {})

        console.log(imagesUrl);

    })

数组示例：

[
  {
    subfolderName: 'Arcus_Rs',
    ImagesParagilder: [
      'swing_arcus2rs_slider_arcus6.jpg',
      'swing_arcus2rs_slider_arcus7.jpg',
      'swing_arcus2rs_slider_arcuslim4.jpg',
      'swing_arcus2rs_slider_arcuslime9.jpg'
    ],
    color: [
      'swing_arcus2rs_flame.png',
      'swing_arcus2rs_lime.png',
      'swing_arcus2rs_nightshade.png',
      'swing_arcus2rs_ocean.png'
    ]
  },
  {
    subfolderName: 'Coden_Pro',
    ImagesParagilder: [ 'DSC5495.jpg' ],
    color: [ 'Air.png', 'Earth.png', 'Fire.png', 'Water.png' ]
  },
  {
    subfolderName: 'Tonic_2',
    ImagesParagilder: [
      'DSC5349r.jpg',
      'DSC6647r.jpg',
      'P1044262r.jpg',
      'P1044438r.jpg',
      'P1044656r.jpg'
    ],
    color: [ 'Lind.png', 'Mustard.png' ]
  }
]

所以我得到了这个结果：

{
  name: 'Arcus_Rs',
  photo_0: 'url********'
}
{
  name: 'Coden_Pro',
  photo_0: 'url********'
}
{
  name: 'Tonic_2',
  photo_0: 'url********'
}

我只有一张照片，我应该有更多的照片，所以对我来说，等待不工作的减少。 如果我尝试const imagesUrl = await Promies.all(paragliderFolder.ImagesParagilder.reduce( ect...)

我有一个错误：TypeError：object 不可迭代（无法读取属性 Symbol（Symbol.iterator））

我不明白为什么控制台日志不等待 reduce 结束。

Answer 1

当您在减速器中await时，function 立即返回 Promise 并退出。 在第二次迭代中， UrlsImage实际上是第一次迭代中的 Promise，而不是您放入 reducer 中的 object。 我认为这不是你想要的。

尝试这样的事情：

const promises = paragliderFolder.ImagesParagilder.map( async (image, index) => {
  const pathImage = pathfolder + '/' + image;
  const folderCoulidinary = 'paraglider/' + paragliderFolder.subfolderName;

  const resu = await uploadImage(pathImage, folderCoulidinary);
  return [`photo_${index}`, resu]
})
const entries = await Promise.all(promises)
const imagesUrl = Object.fromEntries(entries)

这将加载每个图像并为您提供一个元组，您可以从中构建我假设您希望imagesUrl看起来像的东西。 不确定name属性，似乎您想在每次迭代中覆盖它。

这是一个使用它的虚拟应用程序：

 function uploadImage(pathImage, folderCoulidinary){ return new Promise((resolve) => { resolve('uploaded to:' + pathImage) }) } const paragliderFolder = { ImagesParagilder: [ 'img1', 'img2' ] } const pathfolder = 'pathfolder' async function runit(){ const promises = paragliderFolder.ImagesParagilder.map( async (image, index) => { const pathImage = pathfolder + '/' + image; const folderCoulidinary = 'paraglider/' + paragliderFolder.subfolderName; const resu = await uploadImage(pathImage, folderCoulidinary); return [`photo_${index}`, resu] }) const entries = await Promise.all(promises) return Object.fromEntries(entries) } runit().then(o => console.log(o))

Answer 2

您好，经过这里的许多研究和试验，我发现了什么。

array.reduce() 只发送一个 promise，所以我们不能使用 Promise.all()。

这里使用 reduce 和 promise 数组的技巧：

const array = [4, 7, 78];

const postsPromise = array.reduce((acc, element, index) => {
    return acc.then(async result => {
      const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${element}`).then(res => res.json());
      return { ...result, [`Id_${index}`]: post.title };
    });
  }, Promise.resolve({}));

const posts = await postsPromise;
console.log(posts);

Promise.resolve 发送一个 Promise 已经解决了，我们遍历它