如何让 promise 同步执行？

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

我想先执行.then函数，然后再执行console.log("this console should be executed after console.log(dataUrl)")。

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

Answer 1

当然有正当理由强制在 js 中同步执行一个 Promise。最明显的是当require'ing 需要使用一些异步的东西进行初始化的文件时，优化不是最重要的问题。

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

Answer 2

试试这个：

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

Answer 3

对于那些现在遇到这个问题的人：

如果您不关心 IE 支持，您可以使用 async and await 来执行承诺，就好像它是同步的一样。 await 语法将暂停函数的执行，直到 Promise 解决，让您编写代码时就好像没有 Promise 一样。要捕获错误，请将其包装在 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)")
}