node puppeteer SPA 网页图片爬虫实战

前言

博主编程启蒙在高中，当时听说 python 写爬虫很厉害，于是学了一段时间的 python，但当时对于编程语言中的各种概念一无所知，所以学习起来十分困难，最终只能照着网上的教程抄抄简单的爬虫（特别是对于使用了异步加载的网页一筹莫展），最近在浏览某个网站时发现该网站的图片专栏的页面结构十分统一，由于懒得一个一个帖子点开看，决定写一个爬虫爬到本地。

爬虫

因为之前了解过使用 JS 写爬虫，于是很快就选择了puppeteer这个库来写爬虫。puppeteer是一个无头浏览器，可以不打开浏览器模拟浏览器的各种操作。

puppeteer的 API 基本都是异步的，所以我们需要一个 async 函数包裹，首先来介绍一下puppeteer主要的 API：

• puppeteer.launch() 返回一个 browser 实例
• browser.newPage() 返回一个新页面 当然我推荐使用(await browser.pages())[0] 这样就直接使用当前页面，不用新建页面了
• page.goto(url) 页面跳转
• page.evaluate(fn) 相当于在这个页面的控制台执行函数，所以不可访问外部的变量，外部也不可以访问里面的变量，最后会返回一个 promise 包裹 return 的结果

写爬虫的工具选择好后，接下来我们来分析一下页面，该网页的图片使用了懒加载，当图片到视窗的时候，src 才会被设置为真实的 url。

所以我们需要模拟滑动到底部的操作

await page.evaluate(async () => {
   
    await new Promise((resolve, reject) => {
   
        let totalHeight = 0
        let distance = 100
        const timer = setInterval(() => {
   
            var scrollHeight = document.body.scrollHeight
            window.scrollBy(0, distance)
            totalHeight += distance
            if (totalHeight >= scrollHeight) {
   
                clearInterval(timer)
                resolve()
            }
        }, 50)
    })
    return [...document.querySelectorAll("selector")].map(item => item.src)
})

在图片全部加载后，再去获取图片 src

爬取完成之后我们再把数据保存起来

async function mkdir(path, result) {
   
    fs.mkdir(path, {
    recursive: