使用获取的数据获取数据？

Question

我正在尝试从供应商网站获取新产品。在他们的新产品页面上有一堆 URL 和缩略图，单击 URL 会带您进入它的产品页面。

我正在从页面中获取所有 URL，然后想从每个 URL 中获取数据。这行得通，但速度很慢，我不确定如何重写它以使其更干净、更快。

import fetch from "isomorphic-fetch";
import cheerio from "cheerio";

export const fetchNewProducts = async (page) => {
  try {
    const req = await fetch(
      "https://www.supplier.co.uk/newarrivals/?setPerPage=25&search_direction=asc&pageID=" +
        page
    );
    const html = await req.text();
    const $ = cheerio.load(html);

    let newProducts = [];

    for (let i = 1; i < 26; i++) {
      let pageSrc = $(
        `#product_listing > tbody > #_${i} > td:nth-child(2) > a`
      ).attr("href");

      pageSrc = "https://www.supplier.co.uk" + pageSrc;

      const req2 = await fetch(pageSrc);
      const html2 = await req2.text();
      const  = cheerio.load(html2);

      let imageSrc = (
        "#product-main-image .main-image-inner:first-child img"
      ).attr("src");
      const name = ("#product-details dd:nth-child(2)")
        .text();
      const brand = ("#product-details dd:nth-child(4)")
        .text();
      const price = ("#product-details dd:nth-child(6)")
        .text();

      newProducts.push({
        name,
        imageSrc,
        brand,
        price,
        pageSrc,
      });
    }

    return newProducts;
  } catch (err) {}
};

module.exports = {
  fetchNewProducts,
};

Answer 1

您可以并行获取所有 URL 并使用 Promise.all() 等待结果。

const pageSrcs = []

for (let i = 1; i < 26; i++) {
   let pageSrc = $(
     `#product_listing > tbody > #_${i} > td:nth-child(2) > a`
   ).attr("href");

   pageSrc = "https://www.supplier.co.uk" + pageSrc;
   pageSrcs.push(pageSrc);
}

await Promise.all(pageSrcs.map(pageSrc => fetch(pageSrc)
 .then(res => res.text())
 .then(html2 => {
    const  = cheerio.load(html2);

    let imageSrc = (
      "#product-main-image .main-image-inner:first-child img"
    ).attr("src");
    const name = ("#product-details dd:nth-child(2)")
      .text();
    const brand = ("#product-details dd:nth-child(4)")
      .text();
    const price = ("#product-details dd:nth-child(6)")
      .text();

    newProducts.push({
      name,
      imageSrc,
      brand,
      price,
      pageSrc,
    });
})))

return newProducts;

Answer 2

我建议您释放 Promise 的力量。它不仅仅是 async/await.

我已经为您创建了一个执行完全相同操作的示例；同时从 http 请求中获取数据而不是循环。

演示：https://codesandbox.io/s/parallel-http-requests-vvrcv（点击那里的控制台查看输出）

有助于 link 了解并行请求如何使用 Promises 工作： https://javascript.info/promise-api

编码愉快，祝你好运！

使用获取的数据获取数据？

Fetch data using fetched data?

javascript

fetch-api