javascript - 使用 Promises 推迟 forEach 循环中的继续

Question

我的以下目标是:

• 获取决议列表
• (按顺序)扫描每个内容，找到第一个导致成功直播的内容

为了测试这一点，我有 testVideoPresence:

var testCounter = 0;
function testVideoPresence(videoElement) {
    testCounter++;
    if (testCounter >= 5) {
        testCounter = 0;
        return false;
    }
    if (!videoElement.videoWidth || videoElement.videoWidth < 10) { // check to prevent 2x2 issue
        setTimeout(function() {
            testVideoPresence(videoElement); // try again
        }, 500);
    } else if (video.videoWidth * video.videoHeight > 0) {
        return true;
    }
}

如您所见，我使用 setTimeout 最多递归 5 次。这就是事情变得棘手的地方:

 resolutionTestBuilder.buildTests().then(function (resolutionTests) {
        // at this point, I have a set of resolutions that I want to try
        resolutionTests.forEach(function (resolutionTest) {
            // then I want to iterate over all of them until I find one that works
            performTest(resolutionTest).then(function (result) {
                video.srcObject = result.mediaStream; // start streaming to dom
                if (testVideoPresence(video)) { // here is the pain point - how do I await the result of this within the forEach?
                    // return the dimensions
                } else {
                    // continue scanning
                }
            }).catch(function (error) {
                logger.internalLog(error);
            });

            // wait to continue until we have our result

        });
    }).catch(function (error) {
        logger.internalLog(error);
    });

function performTest(currentTest) {
        return streamHelper.openStream(currentTest.device, currentTest.resolution).then(function(streamData) {
            return streamData;
        }).catch(function (error) {
            logger.internalLog(error);
        });;
    };

streamHelper.openStream = function (device, resolution) {
    var constraints = createVideoConstraints(device, resolution);
    logger.internalLog("openStream:" + resolution.label + ": " + resolution.width + "x" + resolution.height);
    return navigator.mediaDevices.getUserMedia(constraints)
        .then(function (mediaStream) {
            streamHelper.activeStream = mediaStream;
            return { stream: mediaStream, resolution: resolution, constraints: constraints };
            // video.srcObject = mediaStream; // push mediaStream into target element.  This triggers doScan.
        })
        .catch(function (error) {
            if (error.name == "NotAllowedError") {
                return error.name;
            } else {
                return error;
            }
        });
 };

我正在尝试等待 forEach 中的结果，然后再继续处理分辨率数组。我知道如果我想转译，我可以使用一些先进的技术，比如 async/await - 但我现在只能使用 vanilla JS 和 Promise/bluebird.js。我有什么选择？免责声明 - 我对 Promise 很陌生，因此上面的代码可能格式非常错误。

更新:

测试是按重要性顺序定义的 - 因此我确实需要 resolutionTests[0] 在 resolutionTests[1] 之前解析。

Answer 1

如果试验的顺序不重要，您可以简单地将 map 与 Promise.race 结合使用，以确保解析列表的第一个 Promise 得到解析整个 list 。您还需要确保您的 Promise 在 then 中返回其他 Promise。

resolutionTestBuilder.buildTests().then(function (resolutionTests) {
    return Promise.race(resolutionTests.map(function (resolutionTest) {
        return performTest(resolutionTest).then(function (result) {
            video.srcObject = result.mediaStream; // start streaming to dom
            return testVideoPresence(video);
        }).catch(function (error) {
            logger.internalLog(error);
        });
    }));
}).catch(function (error) {
    logger.internalLog(error);
});

这当然假设当尺寸不可用时，testVideoPresence 不会解析。

如果试验顺序很重要，那么减少方法可能会起作用。

这基本上会导致 Promise 的顺序应用，并且生成的 Promise 将直到所有这些 Promise 都得到解决。

但是，一旦找到解决方案，我们将其附加到reduce的收集器上，以便进一步的试验也简单地返回该解决方案并避免进一步的测试(因为当找到解决方案时，链已经注册了)

return resolutionTests.reduce(function(result, resolutionTest) {
    var nextPromise = result.intermPromise.then(function() {
        if (result.found) { // result will contain found whenver the first promise that resolves finds this
            return Promise.resolve(result.found);   // this simply makes sure that the promises registered after a result found will return it as well
        } else {
            return performTest(resolutionTest).then(function (result) {
                video.srcObject = result.mediaStream; // start streaming to dom
                return testVideoPresence(video).then(function(something) {
                    result.found = something;
                    return result.found;
                });
            }).catch(function (error) {
                logger.internalLog(error);
            });
        }
    );
    return { intermPromise: nextPromise, found: result.found };
}, { intermPromise: Promise.resolve() }); // start reduce with a result with no 'found' and a unit Promise