promiseをどのように同期させて実行するのですか？

Question

IはPNG画像にDOMを変換するためのDOMツーimage.jsを使用します。 dom-to-image.jsがpromiseを使用するので、コードは非同期で実行されます。私は実行したいと思います。

私は、次のコードを持っている：私はconsole.log("this console should be executed after console.log(dataUrl)")を実行する前に、まず.then機能を実行したい

domtoimage.toPng(document.getElementById("main")).then(function(dataUrl) { 
    console.log(dataUrl); 
}).catch(function(error) { 
    console.error('oops, something went wrong!', error); 
}); 

console.log("this console should be executed after console.log(dataUrl)") 

を。

私にこれを達成するためのいくつかの方法を教えてください。

Answer 1

あなたはそれが正確に何をしたいですので、私はasync/awaitをお勧めしますよりも使用することができます。

あなたのコードは次のように構成する必要があります：あなたはこのようなオンラインさらにチュートリアルを見つけることができます

async function mySynchronousPromise(){ 
    await domtoimage.toPng(document.getElementById("main")).then(function(dataUrl) { 
     console.log(dataUrl); 
    }).catch(function(error) { 
     console.error('oops, something went wrong!', error); 
    }); 
    console.log("this console should be executed after console.log(dataUrl)") 
} 

：

https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

Answer 2

あなたが本当にJavaScriptで発生する非同期計算のために待つことができません。あなたが行うことができる唯一のことは、計算が完了したときに何をしたいのかを宣言することです。

async/awaitを使用すると、コードはあなたの説明どおりに見えますが、計算はまだ非同期です。あなたはどちらかthenにログを移動することができます。

domtoimage.toPng(document.getElementById("main")).then(function(dataUrl) { 
    console.log(dataUrl); 
    console.log("this console should be executed after console.log(dataUrl)") 
}).catch(function(error) { 
    console.error('oops, something went wrong!', error); 
}); 

か/非同期を使用するには、より通常のコードのように、この見を作るために待っています：

async function myFunc(){  
    try{ 
     dataUrl = await awaitdomtoimage.toPng(document.getElementById("main")) 
     console.log(dataUrl); 
     console.log("this console should be executed after console.log(dataUrl)") 
    } 
    catch(error) { 
     console.error('oops, something went wrong!', error); 
    }