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

Question

Promise 的新手 - 尝试找出逻辑。

我正在尝试自动抓取 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 存储在视频属性的容器中，然后对页面上的单个视频执行此操作：

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 作为常量而不是函数的原因是什么？

Answer 1

我会尝试的一个选项是：

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

它利用箭头函数来保存this和async/await，使代码更具可读性。