javascript - While 循环与 Promise 陷入无限循环

Question

我正在运行一个 while 循环，其中包含一个带有成功和失败回调的 Promise。 Promise 检查图像是否在 URL 上成功加载。

查看下面的代码，我不断循环遍历 example.com 的命名照片 1.jpg、2.jpg 等列表，每次发送一个 Promise。

但是循环陷入了无限循环。当我运行下面的代码时，我的浏览器变得无响应。

这是为什么？

另外，为什么当我在 Promise 失败回调中使用 break; 时会收到非法的 break 语句？

function photoCheck(url) {
    return new Promise((resolve, reject) => {
        let img = document.createElement('img')
        img.onload = resolve
        img.onerror = reject
        img.src = url
    })
}

photoCount = 0;
while (running == true) {
    photoCount += 1;
    photo = 'example.com/' + photoCount + '.jpg';
    photoCheck(photo).then(() => {
        var img = document.createElement('img');
        img.src = photo;
        body.appendChild(img);
    }, () => {
        running = false
        // If I use `break;`, I get an illegal break statement error.
    }) 
}

Answer 1

您似乎不了解异步 JavaScript 代码和 JavaScript 事件循环的工作原理。我建议阅读this book的前三章更好地理解这些概念。

您所拥有的内容不可能起作用，因为在循环完成之前 running 不可能更改为 false (而且它永远不会)。只要任何阻塞代码正在运行，then 回调就无法执行。

一种可能的替代方法是在检索每张照片后使用递归逻辑来获取下一张照片。这样做的缺点是它一次只能获取一张照片，但好处是您最多只会有一个失败的请求:

function photoCheck(url) {
    return new Promise((resolve, reject) => {
        let img = document.createElement('img');
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    })
}

function getPhoto(num) {
    const photo = 'example.com/' + num + '.jpg';

    return photoCheck(photo)
         .then((img) => {
             body.appendChild(img);

             return getPhoto(num + 1);
         });
}

getPhoto(1);

OTOH，由于您使用的是现代版本的 JavaScript，因此您可以在 async 函数中使用循环:

function photoCheck(url) {
    return new Promise((resolve, reject) => {
        let img = document.createElement('img');
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    })
}

async function getPhotos() {
    try {
        for (let photoNum = 1; ; photoNum += 1) {
            const photo = 'example.com/' + photoNum + '.jpg';

            body.appendChild(await photoCheck(photo));
        }
    } catch(e) { }
}

getPhotos().then(() => console.log('all done'));

Also why do I get an illegal break statement when I use break; in the Promise failure callback?

因为 break; 语句必须是循环中的语句之一。您试图将 break; 放入一个单独的函数中，它不会成为任何循环的一部分。