Question

我使用dom-to-image.js将dom转换为png图像。由于dom-to-image.js使用promise，因此代码是异步执行的。我想同步执行.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)")

我想在执行console.log("this console should be executed after console.log(dataUrl)")之前先执行.then函数。

请告诉我一些实现这一目标的方法。

Answer 1

对于那些现在绊脚石的人：

如果您不关心IE支持，则可以使用async and await来执行诺言，就好像它是同步的一样。 await语法将暂停函数的执行，直到承诺解决为止，使您可以像没有承诺一样编写代码。要捕获错误，请将其包装在try/catch块中。

唯一的陷阱是使用await语法需要将其包装在用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)")
}

Answer 2

当然有理由强制js中同步执行诺言。最明显的是require正在创建一个需要使用一些异步内容进行初始化的文件，而优化并不是最重要的问题。

似乎软件包synchronized-promise似乎可以解决问题。就您而言（警告-未经测试..）：

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

如何使promise同步执行？

2 个答案: