在前端开发中，我们经常需要从外部网站获取数据来进行展示或者分析。这时候，抓站就成了一个非常重要的技能。在本文中，我们将介绍如何使用 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的选择器来选取我们需要的数据，并将其存储到一个数组中。
-- -------------------- ---- -------
----- ----- - ----------------------
----- ------- - -------------------
----- --- - --------------------------
----- -------- ------------- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
----- - - -------------------
----- -------- - ---
------------- ------------------------- -------- -- -
----- ----- - -------------------------------- -----------
----- ---- - -------------------------------- -----------------
--------------- ------ ---- ---
---
------ ----------------- ----
-展示数据
最后，我们需要将获取到的数据展示在我们的网站上。这个过程非常简单，我们只需要使用 console.log 将数据输出到控制台即可。
async function main() {
const blogList = await getBlogList();
console.log(blogList);
}
main();完整代码
-- -------------------- ---- -------
----- ----- - ----------------------
----- ------- - -------------------
----- --- - --------------------------
----- -------- ------------- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
----- - - -------------------
----- -------- - ---
------------- ------------------------- -------- -- -
----- ----- - -------------------------------- -----------
----- ---- - -------------------------------- -----------------
--------------- ------ ---- ---
---
------ ----------------- ----
-
----- -------- ------ -
----- -------- - ----- --------------
----------------------
-
-------总结
在本文中，我们介绍了如何使用 ES7 async/await 进行抓站实战。通过使用 node-fetch 和 cheerio 这两个库，我们可以轻松地获取网站数据，并将其展示在我们自己的网站上。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6558989bd2f5e1655d2c84a2