How make promise execute synchronously?

I use dom-to-image.js for converting dom to png image. As dom-to-image.js uses promise, the code executes asynchronously. I want to execute .then function synchronously.

I have the following code:

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

I want to execute .then function first, before executing console.log("this console should be executed after console.log(dataUrl)").

Please tell me some way to achieve this.

There are of course legit reasons to force synchronous execution of a promise in js. The most obvious is when require‘ing a file that needs to initialize using some asynchronous stuff, and optimization is not an overriding concern.

Seems like the package synchronized-promise seems like it ought to do the trick. In your case (warning – untested..):

const dti = () => docstoimage.toPng(document.getElementById("main"))
  .then(dataUrl => console.log('url: ', dataUrl))
  .catch(err => console.error('oops: ', err))

const sp = require('synchronized-promise')
const syncDti = sp(dti)
syncDti() // performs the 'synchronized version'

console.log("this console should be executed afterwards")

Try this:

async function doStuff(arg) {console.log(arg + "Assume this is a useful async function")}


doStuff.apply(/* What to specify as this */ this, /* List of args */ ["hello world "])

You didn’t mention if it’s done in browser or in NodeJs. For NodeJs that’s possible by using execSync or spawnSync from child_process:

import { spawnSync } from "child_process";

function doSyncStuff(domObj){
 const output = spawnSync(...);
 console.log("this logs in server");
 
 return output;

Async functions are a promise.
You have to use the promise syntax with them or use await (async-await syntax) on them in another async function.
An example of the regular promise syntax would be: myPromise.then(() => {})
For what you are looking for, you can use the promise syntax on them to wait for them as if they aren’t a promise. Do take care though, as the code in myPromise.then(() => {}) is synchronous and can’t use async-await features. I’ve wrapped things in a main function but you don’t need to for extra code but you don’t need to.
You can then run the main function through the promise method.
For e.g:

async function myFunction() {
     // Do stuff
}

async function main() {
    // Do stuff
    await myFunction()
}

async function mySecondaryFunction() {
    // Do stuff
}

function mySynchronousFunction() {
    console.log("hello")
}

main().then(() => {
    mySynchronousFunction()
    mySecondaryFunction().then(() => {
        console.log("idk")
    }
})

See, we can use both types of functions!
Do know, though that this doesn’t actually make promises synchronous.
It just acts like they’re synchronous.

Read More:   Override Javascript file in chrome

For those stumbling upon this now:

If you’re not concerned with IE support, you could use async and await to execute the promise as though it were synchronous. The await syntax will pause execution of the function until the promise resolves, letting you write the code as if there wasn’t a promise. To catch an error, you wrap it in a try/catch block.

The only catch is that using the await syntax requires you to wrap it inside a function declared with async.

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

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


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts