Question

我有一个将画布图像重新采样到第二个画布的功能。据我了解，使用then，它使用promises并帮助我获取延迟的return，而不是获取 undefined 的内容{} {1}}太早了。

return

我希望将{em> n 一定数量的调用链接到function resample_sizeo(canvas, width, height) { // Initialize var resizer = sizeo(); var canvasResampled = document.createElement('canvas'); canvasResampled.width = width; canvasResampled.height = height; // Function using two canvas' in the form of: resize(from, to) return resizer.resize(canvas, canvasResampled) // Function that converts resampled canvas to a data blob .then(result => resizer.toBlob(result, 'image/jpeg', 95)) // End with a blob to return .then(blob => blob); }并按顺序运行它们。这是我看到的一个受欢迎的请求，我也看到它与resample_sizeo很好地解决了，但由于我不会进入这里的原因我无法使用这些。

我非常接近使用像Promise-Waterfall这样的脚本，但发现我试图满足它的承诺返回函数的数组是我的代码加倍了 - 或许 - 我这样做了很长时间如果我已经有一个返回承诺的函数。也许我过于复杂的事情，我完成了90％的工作。所以我试着回到我的朋友await/async。当然，如果我的函数已经返回了一个promise，我可以将一些函数链接到一起吗？

then

这没有用。 resample_sizeo(sourceCanvas, widthsRequired[0], heightsRequired[0]) .then(function(result) { // (**) console.log(result); resampledImageBlobs[0] = result; resample_sizeo(sourceCanvas, widthsRequired[1], heightsRequired[1]) }).then(function(result) { // (***) resampledImageBlobs[1] = result; resample_sizeo(sourceCanvas, widthsRequired[2], heightsRequired[2]) }).then(function(result) { resampledImageBlobs[2] = result; resample_sizeo(sourceCanvas, widthsRequired[3], heightsRequired[3]) }).then(function(result) { resampledImageBlobs[3] = result; console.log("All done", resampledImageBlobs); uploadImageBlobSet(resampledImageBlobs, 'replace'); });最后显示它是 [blob，undefined，undefined，undefined] ，因此它不会等到每个函数在到达结尾之前完成。我忽视了一些事情。如果我单独检查这些调用的结果，它们会返回一个blob。但他们并没有依次链接并轮流等待。

Answer 1

您需要从resample_sizeo返回承诺。否则，您对.then(...)的下一次调用将立即运行，result参数将是函数的通常返回值，即undefined：

resample_sizeo(sourceCanvas, widthsRequired[0], heightsRequired[0])
.then(function(result) { // (**)
    console.log(result);
    resampledImageBlobs[0] = result;
    return resample_sizeo(sourceCanvas, widthsRequired[1], heightsRequired[1])
}).then(function(result) { // (***)
    resampledImageBlobs[1] = result;
    return resample_sizeo(sourceCanvas, widthsRequired[2], heightsRequired[2])
}).then(function(result) {
    resampledImageBlobs[2] = result;
    return resample_sizeo(sourceCanvas, widthsRequired[3], heightsRequired[3])
}).then(function(result) {
    resampledImageBlobs[3] = result;
    console.log("All done", resampledImageBlobs);
    uploadImageBlobSet(resampledImageBlobs, 'replace');
});

对Promise的误解在一个链条中回归

1 个答案: