How make promise execute synchronously?

user_6409604 0
Viewed 56287

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.

es6-promise promise javascript
4 Answers

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

user_17744680

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

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;
user_45379060

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