javascript - Webscraper 函数返回未定义

Question

我正在创建一个 webscraping 函数来使用数据生成 json，webscraper 部分可以工作，奇怪的是该函数返回未定义

获取产品.js

module.exports.getproduct = url => {
  fetch(url)
    .then(response => response.text())
    .then(body => {
      let product;
      const $ = cheerio.load(body);
      product = {
        productName: $(".product-name").text()
      };
      console.log(product);
      return product;
    });
};

index.js

const {getproduct} = require('./webScraper/getproduct');

console.log(getproduct('https://www.americanas.com.br/produto/134118928'));

console.log(产品);工作正常，但 index.js 上的 console.log 不打印任何内容。我缺少什么？

Answer 1

每个return javascript 中的语句只属于它最接近的周围函数。您的代码中有一个 return 语句，它属于与您预期不同的函数:

.then(body => {
  ...
  return product;
})

所以return语句只会向该函数返回一个值。你的主要功能，getproducts ，实际上没有 return 语句，因此它确实返回 undefined。在 fetch 前面添加一个回车解决了这个问题，但我们还没有完成:

return fetch(url)

因为fetch和 .then后面的 -s 不仅仅返回值。返回Promise 。 promise 是很难的概念，我无法在这里解释，所以如果你还不确定的话，我建议你阅读更多相关内容:)

主要的收获是从 promise 中获取值(value)，您必须使用 .then或await ，更多关于await稍后，让我们继续 .then第一:

getproduct('https://www.americanas.com.br/produto/134118928')
.then(product => {
  console.log('product:', product);
});

现在，人们意识到，编写所有用 .then(...).then(...) 链中的 Promise 执行某些操作的代码-s 会有点令人沮丧，所以我们(javascript 社区)发明了 async/await 。这样你就可以像这样编写代码:

module.exports.getproduct = async (url) => {
  let response = await fetch(url);
  let body = await response.text();
  let $ = cheerio.load(body);
  let product = {
    productName: $(".product-name").text()
  };
  console.log(product);
  return product;
};

现在看起来好多了，您可以看到 return语句实际上又在正确的函数中了!但请注意，您仍然不必忘记输入 await在通常需要 .then 的函数之前最后，但这肯定更容易。

现在你index.js有点棘手，因为你只能使用 await在标有 async 的函数中，但我们可以:

const {getproduct} = require('./webScraper/getproduct');

let main = async () => {
  let product = await getproduct('https://www.americanas.com.br/produto/134118928');
  console.log('product:', product);
}
main();

我希望您能更清楚地了解如何从这里继续前进:)