寫在最前

近期讀到了alsotang的node教程，對一些基礎知識又有了些新認識，故重新梳理了一下，分享出來。這里是教程地址。

本次使用了superagent、cheerio來爬取知乎的發(fā)現頁文章列表，通過async來控制并發(fā)數來動態(tài)獲取延時加載的文章。源碼地址，以及作者的blog歡迎關注，不定期更新中——

實現步驟

• 搭建http服務
• 通過superagent獲取頁面html
• 使用cheerio提取html相應字段
• 使用async第三方庫進行并發(fā)控制

搭建http服務

// Spider.js
var http = require('http')
const server = http.createServer((req, res) => {
  ...
}).listen(9090)

nodejs封裝了HTTP模塊可以讓我們快速的搭建一個基礎服務，由上面代碼可以看出其實一句話就可以解決問題。至于想深入HTTP模塊可參照文檔。至此我們可以通過

node Spider.js 

來開啟服務器，這里推薦使用nodemon其自動監(jiān)聽代碼修改并自啟動還是很方便的。

通過superagent獲取頁面html

var baseUrl = 'http://www.zhihu.com/node/ExploreAnswerListV2'
superagent.get(baseUrl)
          .set({
            'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
            'Referrer': 'www.baidu.com'
          })
          .query({
            params: JSON.stringify(params)
          })
          .end(function(err, obj) {
            if(err) return null
            res.end(JSON.stringify(obj)) 
            //res是一個可寫流里面?zhèn)鬟f的參數類型為string或buffer
            //故使用JSON.stringify()
          })

superagent采用了鏈式調用的形式其API用法一目了然。我們都知道現在的大列表都會實行懶加載，即用戶下拉到一定程度再去請求新的列表，所以我們的爬蟲也應該用某種規(guī)則來獲取那些一開始進入頁面沒有獲取到的文章列表。我們來看下知乎發(fā)現頁下的network，當頁面向下滾動的時候會加載新的文章，這個時候會發(fā)一個新的請求：

首先可以看到這是一個get請求，請求的key為params，后面攜帶了一個對象。作者多拉了幾次頁面發(fā)現了其中加載規(guī)律，每次加載都會是5篇文章。同時offset為0、5、10...由此我們可以通過動態(tài)生成offset拼接參數來請求，就可以理論上拿到n多的文章信息。在此作者犯了個小錯誤，一開始書寫參數的時候作者是這么寫的：

offset = 0、5、10...
var params = {
      'offset':offset,
      'type':'day'
    }
    superagent.get(baseUrl)
          .query({
            params: params
          })
          .end(function(err, obj) {
            ...
          })
  };

這樣寫在請求中會變成什么情況呢？

是不是哪里怪怪的？我們發(fā)現這么寫的話瀏覽器會解析這個參數。。本身的樣子應該是：

這個對象轉變成了字符串，也就是調用了JSON.stringify()方法來將對象進行變換。我知道作者比較愚鈍，以后不會再犯這種低級。。特此分享！

使用cheerio提取html相應字段

const cheerio = require('cheerio')
...
const server = http.createServer((req, res) => {
  ...
  superagent.get(baseUrl)
    ...
    .end(function(err, obj) {
            if(err) return null
            var $ = cheerio.load(obj.text)
            //有興趣可以打印obj看看里面都有什么；
            //text屬性中有著html信息；
            var items = []
            var baseUrl = 'https://www.zhihu.com'
            $('.explore-feed').each(function (index, el) {
              var $el = $(el)
              var tittle = $el.find('h2 a').text().replace(/[\r\n]/g, '')
              var href = url.resolve(baseUrl, $el.find('h2 a').attr('href'))
              var author = $el.find('.author-link').text()
              items.push({
                title: tittle,
                href: href,
                author: author
              })
            })
            res.end(JSON.stringify(items))
          })
}).listen(9090)

通過cheerio.load()方法將返回的html封裝為jQ形式，之后就可以使用jQ的語法對立面的html操作了，whatever u want.

使用async第三方庫進行并發(fā)控制

現在的需求是我們希望可以動態(tài)的爬取頁面信息，那么肯定就要發(fā)很多請求。在這里有兩種選擇。我們可以一次性去請求，也可以控制請求數來執(zhí)行。在這里我們采用控制并發(fā)數的方式進行請求。原因主要在于瀏覽器通常會有安全限制不會允許對同一域名有過大的并發(fā)數畢竟早期服務器受不了這種操作，很脆弱；再由于有些網站會檢測你的請求，如果并發(fā)數過多會覺得是惡意爬蟲啥的之類的把你的IP封掉，所以乖乖的控制下并發(fā)數吧。

async

本次使用了這個為解決異步編程的弊端即回調地獄所推出的一個流程控制庫，讓開發(fā)人員可以有著同步編程的體驗來進行異步開發(fā)，這樣也順應了人的思維模式。這里推薦一個github倉庫這里面有著對async庫使用的demo，簡直好用到爆炸？借用其中一個例子：

var arr = [{name:'Jack', delay:200}, {name:'Mike', delay: 100}, {name:'Freewind', delay:300}, {name:'Test', delay: 50}];
async.mapLimit(arr,2, function(item, callback) {
    log('1.5 enter: ' + item.name);
    setTimeout(function() {
        log('1.5 handle: ' + item.name);
        if(item.name==='Jack') callback('myerr');
        else callback(null, item.name+'!!!');
    }, item.delay);
}, function(err, results) {
    log('1.5 err: ', err);
    log('1.5 results: ', results);
});
//57.797> 1.5 enter: Jack
//57.800> 1.5 enter: Mike
//57.900> 1.5 handle: Mike
//57.900> 1.5 enter: Freewind
//58.008> 1.5 handle: Jack
//58.009> 1.5 err: myerr
//58.009> 1.5 results: [ undefined, 'Mike!!!' ]
//58.208> 1.5 handle: Freewind
//58.208> 1.5 enter: Test
//58.273> 1.5 handle: Test

可以看出mapLimit核心的操作就是先放入需要異步操作的數據，再設定并發(fā)數；然后在第一個func中對其進行遍歷執(zhí)行，當執(zhí)行完成后調用callback，最后所有callback會匯總到第二個func中。有興趣的同學可以去閱讀文檔，async對異步操作的封裝還是很完善的。

完整代碼

var superagent = require('superagent')
var cheerio = require('cheerio')
var http = require('http')
var url = require('url');
var async = require('async')
const server = http.createServer((req, res) => {
  var count = 0;
  var fetchUrl = function (offset, callback) {
    count++;
    console.log('當前并發(fā)數：', count) //測試并發(fā)數
    var baseUrl = 'http://www.zhihu.com/node/ExploreAnswerListV2'
    var params = {
      'offset':offset,
      'type':'day'
    }
    superagent.get(baseUrl)
          .set({
            'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
            'Referrer': 'www.baidu.com'
          })
          .query({
            params: params
          })
          .end(function(err, obj) {
            if(err) return null
            var $ = cheerio.load(obj.text)
            var items = []
            var baseUrl = 'https://www.zhihu.com'
            $('.explore-feed').each(function (index, item) {
              // item = this, $(this)轉換為jq對象
              var tittle = $(this).find('h2 a').text().replace(/[\r\n]/g, '') //去掉空格
              var href = url.resolve(baseUrl, $(this).find('h2 a').attr('href'))
              var author = $(this).find('.author-link').text()
              items.push({
                title: tittle,
                href: href,
                author: author
              })
            })
            res.end(JSON.stringify(items))
            count--
            console.log('釋放了并發(fā)數后，當前并發(fā)數：', count)
            callback(null, JSON.stringify(items))
          })
  };
  var offsets = [];
  for(var i = 0; i < 13; i++) {
    offsets.push(i * 5); //生成很多offset參數值
  }
  async.mapLimit(offsets, 5, function (offset, callback) {
    fetchUrl(offset, callback);
  }, function (err, result) {
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf8' });
    //記得加上編碼utf-8 有亂碼別找我
    res.end(JSON.stringify(result))
  });
}).listen(9090)

再看下后端console下對并發(fā)數的檢測：

以及爬取到的文章列表：

最后

一直希望可以學好node，但總是由于各種原因被阻撓，現在準備開始細細學習一下原生的API(至于怎么實現的。。對不起這輩子注定無緣c++。腦子真的不夠)，以后會不定期更新到blog中對于一些node基礎知識的理解?；A真的很重要。慣例：作者的博客歡迎不定時關注——