チェーンのPromiseリターンの誤解

Question

私はキャンバスイメージを2番目のキャンバスに再サンプリングする関数を持っています。私の知る限りthenを使用することによって、それを理解し、それは約束を使用してだとreturnがあまりにも早く来たなら、私はむしろ何か未定義を得るよりも、遅れreturnを取得支援しています。

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への呼び出しのN量を希望し、それらを順番に実行してください。これは私が見ている一般的なリクエストです。また、それはawait/asyncでうまく処理されていることがわかりますが、私はここには入りません。

私はPromise-Waterfallのようなスクリプトを使用することでかなり近づきましたが、約束している関数の配列を満足させるための私の試みが私のコードを2倍にしていたことがわかりました。約束を返した。たぶん、私は単純なものを過度に複雑化していて、90％の作業が完了したのかもしれません。だから私は友人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'); 
}); 

これは機能しませんでした。 resampledImageBlobsは最後に[blob、未定義、未定義、未定義]であることを示しているため、最後に到達する前に各関数が終了するのを待っていません。私は何か見落としました。これらの呼び出しの結果を個別にチェックすると、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'); 
});