Comment faire une promesse d'exécution synchrone?

Question

J'utilise dom-to-image.js pour convertir l'image dom en png. Comme dom-to-image.js utilise la promesse, le code s'exécute de manière asynchrone. Je veux exécuter la fonction .then de manière synchrone.

J'ai le code suivant:

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)") 

Je veux exécuter première fonction .alors, avant d'exécuter console.log("this console should be executed after console.log(dataUrl)").

S'il vous plaît dites-moi un moyen d'y parvenir.

Answer 1

Si vous pouvez utiliser que je recommanderais async/await parce que c'est exactement ce que vous voulez.

Votre code doit être structuré comme:

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)") 
} 

Vous trouverez d'autres tutoriels en ligne comme ceci:

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

Answer 2

Vous ne pouvez pas vraiment attendre un calcul asynchrone pour arriver en Javascript . La seule chose que vous pouvez faire est de déclarer ce que vous voulez arriver quand ce calcul est fait. En utilisant async/await, le code ressemble plus à ce que vous décrivez, mais le calcul est toujours asynchrone. Vous pouvez déplacer le journal dans le 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); 
}); 

Ou utilisez async/vous attendent pour rendre ce regard plus comme code normal:

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); 
    }