如何正确使用.then

Question

我正在尝试使用 node.js 的 JIMP 库从磁盘加载两种字体。然后使用加载的字体在图像上打印文本。然而，字体没有及时加载，因为函数是异步的，并继续在图像上写入文本，导致没有写入任何内容。 .then() 中的代码在正确加载字体之前执行

function generateStatsImage(statsJsonObject){
var stats = statsJsonObject;
var mainImage = Jimp.read("./template/StatsTemplate.png")
.then(function(image){
  loadedBackground = image;
  var ubuntu36whitefont = Jimp.loadFont("./ubuntu36white.fnt");
  var ubuntu28whitefont = Jimp.loadFont("./ubuntu28white.fnt");
  return (ubuntu36whitefont, ubuntu28whitefont);
})
.then(function(ubuntu36whitefont, ubuntu28whitefont){
  image.print(ubuntu28whitefont, 130, 152 , stats.stats.p2.top1.value);
  image.print(ubuntu28whitefont, 337, 152 , stats.stats.p10.top1.value);
  image.print(ubuntu28whitefont, 542, 152 , stats.stats.p9.top1.value);
  image.write("stats.png"); // save
})
.catch(function(err){
  console.log("catch error: " + err);
});
};

Answer 1

Promise.all 可能是您的朋友，如果您有多个要等待的承诺。然后它将返回一个包含已解决承诺的数组。

例如。

function generateStatsImage(statsJsonObject){
var stats = statsJsonObject;
var mainImage = Jimp.read("./template/StatsTemplate.png")
.then(function(image){
  loadedBackground = image;
  var ubuntu36whitefont = Jimp.loadFont("./ubuntu36white.fnt");
  var ubuntu28whitefont = Jimp.loadFont("./ubuntu28white.fnt");
  //lets use promise.all so we can wait for all fonts
  return Promise.all([ubuntu36whitefont, ubuntu28whitefont]);
})
.then(function(ret){
  //ret has our array of resolved promises, lets put into vars
  var ubuntu36whitefont = ret[0];
  var ubuntu28whitefont = ret[1];
  image.print(ubuntu28whitefont, 130, 152 , stats.stats.p2.top1.value);
  image.print(ubuntu28whitefont, 337, 152 , stats.stats.p10.top1.value);
  image.print(ubuntu28whitefont, 542, 152 , stats.stats.p9.top1.value);
  image.write("stats.png"); // save
})
.catch(function(err){
  console.log("catch error: " + err);
});
};

ps。如果您可以使用现代 JS，上面的很多内容看起来会更好..async / await.. 数组解构的承诺，.. 等等。

例如。

async function generateStatsImage(statsJsonObject){
  try {
    const stats = statsJsonObject;
    //lets use promise.all so we can wait for all fonts & image
    const [image, ubuntu36whitefont, ubuntu28whitefont] = 
      await Promise.all([
        Jimp.read("./template/StatsTemplate.png"),
        Jimp.loadFont("./ubuntu36white.fnt"), 
        Jimp.loadFont("./ubuntu28white.fnt") 
      ]);
    image.print(ubuntu28whitefont, 130, 152 , stats.stats.p2.top1.value);
    image.print(ubuntu28whitefont, 337, 152 , stats.stats.p10.top1.value);
    image.print(ubuntu28whitefont, 542, 152 , stats.stats.p9.top1.value);
    image.write("stats.png"); // save
  } catch (e) {
    console.log("catch error: " + err);
  }
}