Nodejs 進階：Express 經常使用中間件 body-parser 實現解析

時間 2019-11-15

標籤 nodejs 進階 express 經常使用中間件 body parser 實現解析简体版

原文原文鏈接

本文摘錄自《Nodejs學習筆記》，更多章節及更新，請訪問 github主頁地址。歡迎加羣交流，羣號 197339705。javascript

寫在前面

body-parser是很是經常使用的一個express中間件，做用是對post請求的請求體進行解析。使用很是簡單，如下兩行代碼已經覆蓋了大部分的使用場景。java

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));複製代碼

本文從簡單的例子出發，探究body-parser的內部實現。至於body-parser如何使用，感興趣的同窗能夠參考官方文檔。node

入門基礎

在正式講解前，咱們先來看一個POST請求的報文，以下所示。git

POST /test HTTP/1.1
Host: 127.0.0.1:3000
Content-Type: text/plain; charset=utf8
Content-Encoding: gzip

chyingp複製代碼

其中須要咱們注意的有Content-Type、Content-Encoding以及報文主體：github

Content-Type：請求報文主體的類型、編碼。常見的類型有text/plain、application/json、application/x-www-form-urlencoded。常見的編碼有utf8、gbk等。
Content-Encoding：聲明報文主體的壓縮格式，常見的取值有gzip、deflate、identity。
報文主體：這裏是個普通的文本字符串chyingp。

body-parser主要作了什麼

body-parser實現的要點以下：express

處理不一樣類型的請求體：好比text、json、urlencoded等，對應的報文主體的格式不一樣。
處理不一樣的編碼：好比utf8、gbk等。
處理不一樣的壓縮類型：好比gzip、deflare等。
其餘邊界、異常的處理。

1、處理不一樣類型請求體

爲了方便讀者測試，如下例子均包含服務端、客戶端代碼，完整代碼可在筆者github上找到。json

解析text/plain

客戶端請求的代碼以下，採用默認編碼，不對請求體進行壓縮。請求體類型爲text/plain。app

var http = require('http');

var options = {
    hostname: '127.0.0.1',
    port: '3000',
    path: '/test',
    method: 'POST',
    headers: {
        'Content-Type': 'text/plain',
        'Content-Encoding': 'identity'
    }
};

var client = http.request(options, (res) => {
    res.pipe(process.stdout);
});

client.end('chyingp');複製代碼

服務端代碼以下。text/plain類型處理比較簡單，就是buffer的拼接。ide

var http = require('http');

var parsePostBody = function (req, done) {
    var arr = [];
    var chunks;

    req.on('data', buff => {
        arr.push(buff);
    });

    req.on('end', () => {
        chunks = Buffer.concat(arr);
        done(chunks);
    });
};

var server = http.createServer(function (req, res) {
    parsePostBody(req, (chunks) => {
        var body = chunks.toString();
        res.end(`Your nick is ${body}`)
    });
});

server.listen(3000);複製代碼

解析application/json

客戶端代碼以下，把Content-Type換成application/json。post

var http = require('http');
var querystring = require('querystring');

var options = {
    hostname: '127.0.0.1',
    port: '3000',
    path: '/test',
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Content-Encoding': 'identity'
    }
};

var jsonBody = {
    nick: 'chyingp'
};

var client = http.request(options, (res) => {
    res.pipe(process.stdout);
});

client.end( JSON.stringify(jsonBody) );複製代碼

服務端代碼以下，相比text/plain，只是多了個JSON.parse()的過程。

var http = require('http');

var parsePostBody = function (req, done) {
    var length = req.headers['content-length'] - 0;
    var arr = [];
    var chunks;

    req.on('data', buff => {
        arr.push(buff);
    });

    req.on('end', () => {
        chunks = Buffer.concat(arr);
        done(chunks);
    });
};

var server = http.createServer(function (req, res) {
    parsePostBody(req, (chunks) => {
        var json = JSON.parse( chunks.toString() );    // 關鍵代碼 
        res.end(`Your nick is ${json.nick}`)
    });
});

server.listen(3000);複製代碼

解析application/x-www-form-urlencoded

客戶端代碼以下，這裏經過querystring對請求體進行格式化，獲得相似nick=chyingp的字符串。

var http = require('http');
var querystring = require('querystring');

var options = {
    hostname: '127.0.0.1',
    port: '3000',
    path: '/test',
    method: 'POST',
    headers: {
        'Content-Type': 'form/x-www-form-urlencoded',
        'Content-Encoding': 'identity'
    }
};

var postBody = { nick: 'chyingp' };

var client = http.request(options, (res) => {
    res.pipe(process.stdout);
});

client.end( querystring.stringify(postBody) );複製代碼

服務端代碼以下，一樣跟text/plain的解析差很少，就多了個querystring.parse()的調用。

var http = require('http');
var querystring = require('querystring');

var parsePostBody = function (req, done) {
    var length = req.headers['content-length'] - 0;
    var arr = [];
    var chunks;

    req.on('data', buff => {
        arr.push(buff);
    });

    req.on('end', () => {
        chunks = Buffer.concat(arr);
        done(chunks);
    });
};

var server = http.createServer(function (req, res) {
    parsePostBody(req, (chunks) => {
        var body = querystring.parse( chunks.toString() );  // 關鍵代碼
        res.end(`Your nick is ${body.nick}`)
    });
});

server.listen(3000);複製代碼

2、處理不一樣編碼

不少時候，來自客戶端的請求，採用的不必定是默認的utf8編碼，這個時候，就須要對請求體進行解碼處理。

客戶端請求以下，有兩個要點。

編碼聲明：在Content-Type最後加上;charset=gbk
請求體編碼：這裏藉助了iconv-lite，對請求體進行編碼iconv.encode('程序猿小卡', encoding)

var http = require('http');
var iconv = require('iconv-lite');

var encoding = 'gbk';  // 請求編碼

var options = {
    hostname: '127.0.0.1',
    port: '3000',
    path: '/test',
    method: 'POST',
    headers: {
        'Content-Type': 'text/plain; charset=' + encoding,
        'Content-Encoding': 'identity',        
    }
};

// 備註：nodejs自己不支持gbk編碼，因此請求發送前，須要先進行編碼
var buff = iconv.encode('程序猿小卡', encoding);

var client = http.request(options, (res) => {
    res.pipe(process.stdout);
});

client.end(buff, encoding);複製代碼

服務端代碼以下，這裏多了兩個步驟：編碼判斷、解碼操做。首先經過Content-Type獲取編碼類型gbk，而後經過iconv-lite進行反向解碼操做。

var http = require('http');
var contentType = require('content-type');
var iconv = require('iconv-lite');

var parsePostBody = function (req, done) {
    var obj = contentType.parse(req.headers['content-type']);
    var charset = obj.parameters.charset;  // 編碼判斷：這裏獲取到的值是 'gbk'

    var arr = [];
    var chunks;

    req.on('data', buff => {
        arr.push(buff);
    });

    req.on('end', () => {
        chunks = Buffer.concat(arr);
        var body = iconv.decode(chunks, charset);  // 解碼操做
        done(body);
    });
};

var server = http.createServer(function (req, res) {
    parsePostBody(req, (body) => {
        res.end(`Your nick is ${body}`)
    });
});

server.listen(3000);複製代碼

3、處理不一樣壓縮類型

這裏舉個gzip壓縮的例子。客戶端代碼以下，要點以下：

壓縮類型聲明：Content-Encoding賦值爲gzip。
請求體壓縮：經過zlib模塊對請求體進行gzip壓縮。

var http = require('http');
var zlib = require('zlib');

var options = {
    hostname: '127.0.0.1',
    port: '3000',
    path: '/test',
    method: 'POST',
    headers: {
        'Content-Type': 'text/plain',
        'Content-Encoding': 'gzip'
    }
};

var client = http.request(options, (res) => {
    res.pipe(process.stdout);
});

// 注意：將 Content-Encoding 設置爲 gzip 的同時，發送給服務端的數據也應該先進行gzip
var buff = zlib.gzipSync('chyingp');

client.end(buff);複製代碼

服務端代碼以下，這裏經過zlib模塊，對請求體進行了解壓縮操做（guzip）。

var http = require('http');
var zlib = require('zlib');

var parsePostBody = function (req, done) {
    var length = req.headers['content-length'] - 0;
    var contentEncoding = req.headers['content-encoding'];
    var stream = req;

    // 關鍵代碼以下
    if(contentEncoding === 'gzip') {
        stream = zlib.createGunzip();
        req.pipe(stream);
    }

    var arr = [];
    var chunks;

    stream.on('data', buff => {
        arr.push(buff);
    });

    stream.on('end', () => {
        chunks = Buffer.concat(arr);        
        done(chunks);
    });

    stream.on('error', error => console.error(error.message));
};

var server = http.createServer(function (req, res) {
    parsePostBody(req, (chunks) => {
        var body = chunks.toString();
        res.end(`Your nick is ${body}`)
    });
});

server.listen(3000);複製代碼

寫在後面

body-parser的核心實現並不複雜，翻看源碼後你會發現，更多的代碼是在處理異常跟邊界。

另外，對於POST請求，還有一個很是常見的Content-Type是multipart/form-data，這個的處理相對複雜些，body-parser不打算對其進行支持。篇幅有限，後續章節再繼續展開。

歡迎交流，若有錯漏請指出。