前端er 使用 Node 爬數據

爬蟲類的需求，基本上在各個公司都會有，不免就會落在前端開發的頭上。今天咱們就來看看 Node 如何爬數據。

其實抓取數據對於前端來講，就是 ajax 請求一個接口，只不過返回值有 text/html（早期 XML 之類的），application/json（目前工做中都是這個類型的） 兩種。有時候爲了一些簡單的數據分析，我就直接在控制檯請求數據。

request 請求

頁面發起的 request 和 node 發起的 request 仍是不同的。咱們分別說一下

Node 發起請求

https 庫、http 庫

const https = require('https');//Node 自帶的
https.get('https://www.lilnong.top/cors/node-https', (resp) => {
 let data = '';
 resp.on('data', (chunk) => {
  data += chunk;
 });
 resp.on('end', () => {
  console.log('resp', JSON.parse(data));
 });
}).on("error", (err) => {
 console.log("Error: " + err.message);
});

優勢就是原生自帶、無依賴。
缺點呢，也很明顯了，好多功能都不支持，寫法複雜。http 和 https 不共享。
你能夠想一想成前端的 XMLHTTPRequest 不多有人直接用吧。

request 庫

是一個第三方庫，須要安裝。使用簡單，大量的人在使用。

request = require('request');
request('https://www.lilnong.top/cors/node-request', 
    {json: true},
    function(err, res, body){
        if (err) { return console.log(err); }
        console.log(body);
    }
);

優勢來說就是，封裝庫，使用方便，支持的東西較多。
缺點來講就是庫中止了新功能的開發，不是promise的（request-promise）。

axios 庫

也是一個第三方的庫，須要安裝。由於這個庫能夠跨環境使用（前端和 Node 均可以使用），使用起來也是很順手的。

axios = require('axios');
axios('https://www.lilnong.top/cors/node-axios').then(function(rsp){
        console.log(rsp.data);
    });

優勢來說就是，跨環境，promise。
缺點來說就是，node中的formdata，https設置代理的時候（axios-https-proxy-fix）

其餘庫

其實庫還有不少 https://github.com/request/re...

1. node-fetch
2. got
3. superagent
4. urllib

頁面發起請求

XMLHttpRequest

xhr = new XMLHttpRequest();
xhr.open('get', '//www.lilnong.top/cors/XMLHttpRequest')
xhr.send()
xhr.responseType='json'
xhr.onload = () => console.log(xhr.response)

優勢來說就是原生自帶，通過多年更新，基本上功能都有了。
缺點來講就是ie低版本不支持（作ie的不用jquery不是胡扯嗎，通常都是$.ajax）

axios

跨平臺的庫，能夠在瀏覽器環境和 Node 環境使用。

axios('https://www.lilnong.top/cors/axios').then(function(rsp){
        console.log(rsp.data);
    });

優勢，跨平臺（上面代碼拷貝過來就能跑）
缺點，還好吧。我基本上一直在用，沒有明顯的弱點。

$.ajax

jquery 庫中帶的方法。也是一款神器，也支持 promise 的方式。

$.ajax({
    url: 'https://www.lilnong.top/cors/$.ajax'
}).then(function(data){
    console.log(data);
});

優勢：兼容性賊好，支持各類寫法。
缺點：時代變了，jquery 不流行了。
你問這是什麼？這是青春

fetch

瀏覽器的新規範。使用起來也挺方便，abort 的規範也在制定中。固然如今還幹不掉 xhr。

fetch('https://www.lilnong.top/cors/fetch')
    .then(v=>v.json())
    .then(console.log)

優勢：瀏覽器新加，天生支持 promise
缺點：兼容性，還有挺多的功能須要增長（停止、進度、cookie（已改默認值））

response 響應

Node 處理響應

html \ xml

我使用的是 cheerio ，算是 Node 中的 jQuery 吧。
看看這 API，熟悉吧基本上手就能用。

$ = cheerio.load('<h1>lilnong.top</h1>');//解析DOM，通常咱們都是把請求回來的響應放進去。
$('h1').text('歡迎關注公衆號:前端linong。');
$('h1').addClass('title');

固然，還有還有其餘庫 JSDOM、Puppeteer（當作一個瀏覽器去使用，單擊按鈕之類的）。

html script 標籤中的內容

這部分其實比較坑，好比說你用 jQuery 沒獲取過script中的變量吧。

其實有個很簡單的辦法，通常來講你要爬取的數據都不是前端去寫的，不少都是模板直接輸出的。包括Vue的SSR之類的。

特徵很明顯，一個變量佔據一行。

那麼咱們就能夠直接去比對每一行，若是你要找的那個變量開頭，那麼咱們就截取這一行。

例子後補吧。我忘了誰家是這樣的了。

json

這就很簡單了，基本是個庫就支持，不支持的也有 JSON.parse。

不過相比較上兩個而言，這個更多的是要分析字段、摸索規則、referer 處理這些東西。

前端處理響應

前端來說通常是簡單的一些數據，並且主要用於分析。
固然也是有優點的，好比自動攜帶 cookie、自動更新 cookie、甚至你能夠把他內部封裝的 ajax 拿出來使用。

html \ xml

操做一下DOM對於前端來講不是屢見不鮮嗎？
jQuery 吃遍天呀。你說就偶爾一下，querySelector、getElementById 這些均可以知足你。

html script 標籤中的內容

這個就更簡單了，直接獲取對象呀。。。沒的說吧。

json

json 的話，也不難呀是吧。

微信公衆號：前端linong