携手创作，共同成长！这是我参与「日新计划 8 月更文挑战」的第9天，点击查看活动详情

爬虫

当下一个信息爆炸的时代，作为一名开发者，如果不能理解爬虫，理论上来说并不是一个善于变通的工程师。这就好比攻防，一个不会进攻的安全工程师并不是一个合格的防护工程师。

简单的例子解释爬虫概念:百度蜘蛛，百度引擎最得力的爬虫干将，每天会在海量的互联网信息中进行爬取，收集并整理网上的网页，图片，视频等信息。最后在自己服务器上生成软链和快照，当你搜索到对应的关键词时，会喷你一脸你想要的优酸乳。

API爬取

很多网站都存在公开的Api接口，如果你想拿到一些信息可以访问（合法）。

// 一个标准的接口请求案例
const axios = require('axios')
axios({
    url:'',//接口地址
    method: 'GET',//请求类型
    data: {}, //传参
    headers: { //请求头
        origin: '',
        pragma: 'no-cache',
        referer: '',
        ...
    }
}).then(res=>{
    console.log(res.data)
}).catch(e){
    console.log(e)
}

多数情况下我们会按照逻辑执行，需要异步请求

// 一个组合方式
const run = async()=>{
    const res = await axios.get('')
    console.log(res)
}

如果需要上下文关联变量可以使用try catch

有时候我们会请求带有cookie的api，就需要挂载cookie。这就需要我们简单封装一下axios

// 接口封装
const request = (options) => {
    return new Promise((resolve, reject) => {
      options = Object.assign({}, options, {
        headers: {
          cookie: this.cookie || '' //全局cookie参数
        }
      })
      const opts = deepMerge(defaultOptions, options) //对象深拷贝 来自fastool
      axios(opts)
        .then(res => {
          let data = res.data || {}
          resolve(data.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  }
// 接口请求
queryUserProfile() {
    return this.request({
      method: 'GET',
      url: ''
    })
}

我们在测试文件index.js中调用接口即可

;(async () => {
await queryUserProfile()
// or
const res = await queryUserProfile()
})()

网页抓取

一些安全性比较高的网站会设置反爬虫，一般会校验请求头user-agent字段，判断请求来源。 这里推荐一个工具库，cheerio，在node环境下操作dom

const axios = require('axios')
const fs = require('fs')
const cheerio = require('cheerio') 
const getPage = async () => {
  const { data } = await axios.get('', {
    headers: {
      'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36 Edg/99.0.1150.36'
    }
  })
  return data
;(async () => {
const pageData = await getPage()
})()
const $ = cheerio.load(pageData) 
console.log(`$('.class-name').text()`)

总结

这里我们学习如何快速的请求接口，抓取想要的数据。本章节可以说是小白入门，因为抓取数据里面别有洞天。来几个灵魂拷问，也是下节课的内容：

  • 如果多线程同步抓取接口？
  • 如果批量发起不同身份的请求？
  • 如何模拟用户操作破解验证码，躲避人机交互验证？
  • 如何将爬取的数据写入数据库并关联表字段？
  • 如何解密视频格式ts文件，并组合合并为mp4格式？
  • 如何将网页转为PDF并保存到本地？

这些都会在后面的教程中逐步揭开，逐一揭开~
如果喜欢我的文章，麻烦点个赞，评个论，收个藏，关个注。

《高阶前端指北》之JavaScript爬虫速成攻略（第一弹）

手绘图，手打字，纯原创，摘自未发布的书籍：《高阶前端指北》，转载请获得本人同意。