创建内部带有循环的异步函数

Question

我有一个小问题，我需要 makeZip 函数来等待 takeScreenshot 函数获取它需要的所有屏幕截图，我该如何在兼顾最佳实践的同时做到这一点？ （我知道此时“then”对于 post 方法没有意义，我之前只是尝试过，但它没有按我想要的方式工作）

功能：

const takeScreenshot = (url) => {
  const resolutionsArray = Object.values(resolutions);
  resolutionsArray.map(async (mediaSize) => {
    webshot(url, setFileName(url, mediaSize), setOptions(mediaSize), (err) => {
      if (!err) {
        console.log("screenshot taken!");
      }
    });
  });
};

调用函数：

app.post("/", async (req, res) => {
  const { url } = req.body;
  takeScreenshot(url)
    .then((url) => makeZip(url))
    .then((url) => sendEmail(url))
    .then((message) => res.send(message))
    .catch((err) => console.log(err));
});

Answer 1

我的建议是：

1. 在需要处理多个 Promise 时使用 Promise.all 或 Promise.allSettled
2. 地图 fn 的提取回调

const makeWebshot = (argsHere) => new Promise((reselove, reject) => {
  webshot(url, setFileName(url, mediaSize), setOptions(mediaSize), (err) => {
      if (err) return reject(err);
      return resolve();
    });
});

1. 将 takeScreenshot 更新为

const takeScreenshot = (url) => {
  const resolutionsArray = Object.values(resolutions);
  return Promise.all(resolutionsArray.map((mediaSize) => makeWebshot(argsHere)));
};

Answer 2

在处理 Promise 列表时，您需要使用 Promise.all 等待它们全部解决。这是一个简单的例子：

const list = [1,2,3];
const all = list.map(i => new Promise((resolve, reject) => {
  setTimeout(() => { 
    console.log(i);
    resolve(i*2);
  }, 100);
}));
Promise.all(all).then(console.log)

在你的情况下，它会是这样的：

const takeScreenshot = (url) => 
  Object.values(resolutions).map(async (mediaSize) => {
    webshot(url, setFileName(url, mediaSize), setOptions(mediaSize), (err) => {
      if (!err) {
        console.log("screenshot taken!");
      }
    });
  });

app.post("/", async (req, res) => {
  const { url } = req.body;
  Promise.all(takeScreenshot(url))
    .then((listOfUrls) => ...
});

但由于我不知道 webshot 返回什么，我无法告诉你 listOfUrls 的处理应该是什么样子。