使用 ES7 async/await 进行抓站实战-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要从外部网站获取数据来进行展示或者分析。这时候，抓站就成了一个非常重要的技能。在本文中，我们将介绍如何使用 ES7 async/await 进行抓站实战。

什么是 async/await？

async/await 是 ES7 中的一个新特性，它能够让我们更方便地编写异步代码。通过使用 async 和 await 关键字，我们可以让异步代码看起来像同步代码一样，从而更容易理解和维护。

抓站实战

现在，我们来看一个简单的抓站实战。我们要从一个网站上获取一些数据，并将其展示在我们自己的网站上。具体来说，我们要从 https://www.cnblogs.com 上获取最新的 10 篇博客的标题和链接，并将它们展示在我们的网站上。

安装依赖

首先，我们需要安装一些依赖。我们将使用 node-fetch 这个库来进行 HTTP 请求，使用 cheerio 这个库来解析 HTML。

npm install node-fetch cheerio

获取数据

接下来，我们需要编写代码来获取数据。我们可以使用 node-fetch 发送 HTTP 请求，并使用 cheerio 解析 HTML。具体来说，我们需要做以下几件事情：

使用 node-fetch 发送 GET 请求，获取网页内容。
将网页内容作为参数传入 cheerio.load 函数，获取一个可以操作 DOM 的对象。
使用 cheerio 的选择器来选取我们需要的数据，并将其存储到一个数组中。

// javascriptcn.com 代码示例
const fetch = require("node-fetch");
const cheerio = require("cheerio");

const url = "https://www.cnblogs.com";

async function getBlogList() {
  const response = await fetch(url);
  const html = await response.text();
  const $ = cheerio.load(html);

  const blogList = [];
  $("#post_list .post_item").each((index, element) => {
    const title = $(element).find(".post_item_body a").text();
    const link = $(element).find(".post_item_body a").attr("href");
    blogList.push({ title, link });
  });

  return blogList.slice(0, 10);
}

展示数据

最后，我们需要将获取到的数据展示在我们的网站上。这个过程非常简单，我们只需要使用 console.log 将数据输出到控制台即可。

async function main() {
  const blogList = await getBlogList();
  console.log(blogList);
}

main();

完整代码

// javascriptcn.com 代码示例
const fetch = require("node-fetch");
const cheerio = require("cheerio");

const url = "https://www.cnblogs.com";

async function getBlogList() {
  const response = await fetch(url);
  const html = await response.text();
  const $ = cheerio.load(html);

  const blogList = [];
  $("#post_list .post_item").each((index, element) => {
    const title = $(element).find(".post_item_body a").text();
    const link = $(element).find(".post_item_body a").attr("href");
    blogList.push({ title, link });
  });

  return blogList.slice(0, 10);
}

async function main() {
  const blogList = await getBlogList();
  console.log(blogList);
}

main();

总结

在本文中，我们介绍了如何使用 ES7 async/await 进行抓站实战。通过使用 node-fetch 和 cheerio 这两个库，我们可以轻松地获取网站数据，并将其展示在我们自己的网站上。希望本文能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6558989bd2f5e1655d2c84a2