如何在每个循环中等待承诺？

如何解决如何在每个循环中等待承诺？

承诺的新内容-试图弄清楚逻辑。

我正在尝试自动抓取youtube预览缩略图，如this answer建议：

const youtubeAnimation = id => {
    return fetch(
        `https://cors-anywhere.herokuapp.com/https://www.youtube.com/results?search_query=${id}&sp=QgIIAQ%253D%253D`,{ headers: {} }
    )
        .then(r => r.text())
        .then(html => {
            const found = html.match(
                new RegExp(`["|']https://i.ytimg.com/an_webp/${id}/(.*?)["|']`)
            );
            if (found) {
                try {
                    const url = JSON.parse(found[0]);
                    return url;
                } catch (e) {}
            }
            throw "not found";
        })
        .catch(e => {
            return false;
        });
};

我将youtube ID存储在video属性的容器中，然后执行此操作，该操作对于页面上的单个视频效果很好：

youtubeAnimation($('.video').attr('youtube')).then(function (value) {
    $('<img class="videopreview" src="' + value + '">').insertBefore($('.video'));
});

但是我需要能够使用页面上可变数量的$('.video')元素来运行它。我尝试将其放在每个循环中：

$(".video").each(function () {
    youtubeAnimation($(this).attr('youtube')).then(function (value) {
        $('<img class="videopreview" src="' + value + '">').insertBefore($(this));
    });
});

但这只是将预览缩略图添加到最后一个$('.video')元素中。使用console.log进行测试时，我可以看到所有预览图像都已被发现，但是只有最后一个图像应用于了最后一个元素。在继续下一个元素之前，我需要以某种方式暂停each循环，直到youtubeAnimation为止。

要使这些全部正常工作，还需要执行哪些其他步骤？而且，答案给出youtubeAnimation作为const而不是函数的原因是什么？

解决方法

我会尝试的一种选择是：

$(".video").each(async () => {
  const animation = await youtubeAnimation($(this).attr('youtube'));
  $('<img class="videopreview" src="' + value + '">').insertBefore($(this));
  
});

它利用箭头功能保留this并进行异步/等待以使代码更具可读性。