如何处理依赖于另一个承诺的承诺循环

Question

我是 JavaScript 新手，但在使用 Promise 时遇到了麻烦。 我正在使用 cloudcraper 来检索网页的 html 以从中抓取数据。我有一个简单的函数 - getData() - 它调用 cloudcraper.get() 并将 html 传递给 extract() 函数，该函数负责抓取数据。 这是工作代码：

const getData = function(pageUrl) {
  var data;
  return cloudscraper.get(pageUrl)
    .then(function(html) {
      data = extract(html);
      return data;  
    })
    .catch(function(err) {
      // handle error
    })
}

返回的“数据”对象包含我要连接的 URL 数组，以便检索其他信息。该信息必须存储在同一个数据对象中。所以我想为数组中包含的每个 URL 再次调用 cloudcraper.get() 方法。 我试过下面的代码：

const getData = function(pageUrl) {
  var data;
  // first cloudscraper call:
  // retrieve main html
  return cloudscraper.get(pageUrl)
    .then(function(html) {
      // scrape data from it
      data = extract(html);
      for (let i = 0; i < data.array.length; ++i) {
        // for each URL scraped, call cloudscraper
        // to retrieve other data
        return cloudscraper.get(data.array[i])
          .then(function(newHtml) {
            // get other data with cheerio
            // and stores it in the same array
            data.array[i] = getNewData(newHtml);
          })
          .catch(function(err) {
            // handle error
          }) 
        }
        return data;  
      })
    .catch(function(err) {
      // handle error
    })
}

但它不起作用，因为数据对象是在循环中的承诺被解决之前返回的。 我知道可能有一个简单的解决方案，但我无法弄清楚，所以你能帮我吗？提前致谢。

Answer 1

避免此类问题的最佳方法是使用 async/await，如 cmets 中所建议的那样。这是基于您的代码的示例：

const getData = async function(pageUrl) {
  var data;
  // first cloudscraper call:
  // retrieve main html
  try {
    const html = await cloudscraper.get(pageUrl);
    // scrape data from it
    data = extract(html);
    for (let i = 0; i < data.array.length; ++i) {
      // for each URL scraped, call cloudscraper
      // to retrieve other data
      const newHtml = await cloudscraper.get(data.array[i]);
      // get other data with cheerio
      // and stores it in the same array
      data.array[i] = getNewData(newHtml); // if getNewData is also async, you need to add await
    }
  } catch (error) {
    // handle error
  }
  return data;
}
// You can call getData with .then().catch() outside of async functions 
// and with await inside async functions

Answer 2

这可以通过使用Promise.all和await/async来显着简化

如果我的理解是正确的，您正在尝试执行以下步骤：

1. 获取原始 HTML
2. 提取一些 HTML（看起来你在寻找更多的 url）
3. 对于每个提取的url，你想重新调用cloudscraper
4. 将每次调用的结果放回原始数据对象中。

const getData = async (pageUrl) => {
    const html = await cloudscraper.get(pageUrl);
    const data = extractHtml(html);
    const promises = data.array.map( d => cloudscraper.get(d));
    const results = await Promise.all(promises);
    // If you wanted to map the results back into the originaly data object
    data.array.forEach( (a, idx) => a = results[idx] );
    return data;
};