詳談nodejs異步編程
目前需求中涉及到大量的異步操作，實際的頁面越來越傾向于單頁面應用。以后可以會使用backbone、angular、knockout等框架，但是關于異步編程的問題是首先需要面對的問題。隨著node的興起，異步編程成為一個非常熱的話題。經(jīng)過一段時間的學習和實踐，對異步編程的一些細節(jié)進行總結。
1.異步編程的分類
解決異步問題方法大致包括：直接回調、pub/sub模式(事件模式)、異步庫控制庫(例如async、when)、promise、Generator等。
1.1 回調函數(shù)
回調函數(shù)是常用的解決異步的方法，經(jīng)常接觸和使用到，易于理解，并且在庫或函數(shù)中非常容易實現(xiàn)。這種也是大家接使用異步編程經(jīng)常使用到的方法。
但是回調函數(shù)的方式存在如下的問題：
1. 可能形成萬惡的嵌套金字塔，代碼不易閱讀；
2. 只能對應一個回調函數(shù)，在很多場景中成為一個限制。
1.2 pub/sub模式(事件)
該模式也稱為事件模式，是回調函數(shù)的事件化，在jQuery等類庫中非常常見。
事件發(fā)布訂閱者模式本身并無同步與異步調用的問題，但是在node中，emit調用多半是伴隨事件循環(huán)而異步觸發(fā)的。該模式常用來解耦業(yè)務邏輯，事件發(fā)布者無須關注注冊的回調函數(shù)，也不用關注回調函數(shù)的個數(shù)，數(shù)據(jù)通過消息的方式可以很靈活的傳遞。
該模式的好處是：1. 便于理解；2. 不再局限于一個回調函數(shù)。
不好的地方時：1. 需要借助類庫； 2.事件與回調函數(shù)的順序很重要
var img = document.querySelect(#id);
img.addEventListener('load', function() {
// 圖片加載完成
......
});
img.addEventListener('error', function() {
// 出問題了
......
});
上述代碼存在兩個問題：
a. img實際已經(jīng)加載完成，此時才綁定load回調函數(shù)，結果回調不會執(zhí)行，但依然希望執(zhí)行該對應回調函數(shù)。
var img = document.querySelect(#id);
function load() {
...
}
if(img.complete) {
load();
} else {
img.addEventListener('load', load);
}
img.addEventListener('error', function() {
// 出問題了
......
});
b. 無法很好處理存在異常
結論：事件機制最適合處理同一個對象上反復發(fā)生的事情，不需要考慮當綁定回調函數(shù)之前事件發(fā)生的情況。
1.3 異步控制庫
目前的異步庫主要有Q、when.js、win.js、RSVP.js等。
這些庫的特點是代碼是線性的，可以從上到下完成書寫，符合自然習慣。
不好的地方也是風格各異，不便于閱讀，增加學習成本。
1.4 Promise
Promise翻譯成中文為承諾，個人理解是異步完成之后，就會給外部一個結果（成功或失?。?，并承諾結果不再發(fā)生改變。換句話就是Promise反應了一個操作的最終返回結果值(A promise represents the eventual value returned from the single completion of an operation)。目前Promise已經(jīng)引入到ES6規(guī)范里面，Chrome、firefox等高級瀏覽器已經(jīng)在內部實現(xiàn)了該原生方法，使用起來相當方便。
下面從如下幾個方面來解析Promise的特點：
1.4.1 狀態(tài)
包含三種狀態(tài)：pending、fulfilled、rejected，三種狀態(tài)只能發(fā)生兩種轉換(從pending--->fulfilled、pending—>rejected)，并且狀態(tài)的轉換僅能發(fā)生一次。
1.4.2 then方法
then方法用于指定異步事件完成之后的回調函數(shù)。
這個方法可以說是Promise的靈魂方法，該方法讓Promise充滿了魔力。有如下幾個具體表現(xiàn)：
a） then方法返回Promise。這樣就實現(xiàn)了多個異步操作的串行操作。
關于上圖中黃圈1的對value的處理是Promise里面較為復雜的一個地方，value的處理分為兩種情況：Promise對象、非Promise對象。
當value 不是Promise類型時，直接將value作為第二個Promise的resolve的參數(shù)值即可；當為Promise類型時，promise2的狀態(tài)、參數(shù)完全由value決定，可以認為promsie2完全是value的傀儡，promise2僅僅是連接不同異步的橋梁。
Promise.prototype.then = function(onFulfilled, onRejected) {
return new Promise(function(resolve, reject) { //此處的Promise標注為promise2
handle({
onFulfilled: onFulfilled,
onRejected: onRejected,
resolve: resolve,
reject: reject
})
});
}
function handle(deferred) {
var handleFn;
if(state === 'fulfilled') {
handleFn = deferred.onFulfilled;
} else if(state === 'rejected') {
handleFn = deferred.onRejected;
}
var ret = handleFn(value);
deferred.resolve(ret); //注意，此時的resolve是promise2的resolve
}
function resolve(val) {
if(val && typeof val.then === 'function') {
val.then(resolve); // if val為promise對象或類promise對象時，promise2的狀態(tài)完全由val決定
return;
}
if(callback) { // callback為指定的回調函數(shù)
callback(val);
}
}
b）實現(xiàn)了多個不同異步庫之間的轉換。
在異步中存在一個叫thenable的對象，就是指具有then方法的對象，只要一個對象對象具有then方法，就可以對其進行轉換，例如：
var deferred = $('aa.ajax'); // !!deferred.then === true
var P = Promise.resolve(deferred);
p.then(......)
1.4.3 commonJS Promise/A規(guī)范
目前關于Promise的規(guī)范存在Promise/A和Promise/A+規(guī)范，這說明關于Promise的實現(xiàn)是挺復雜的。
then(fulfilledHandler, rejectedHandler, progressHandler)
1.4.4 注意事項
一個Promise里面的回調函數(shù)是共享value的，在結果處理中value作為參數(shù)傳遞給相應的回調函數(shù)，如果value是對象，那就要小心不要輕易修改value的值。
var p = Promise.resolve({x: 1});
p.then(function(val) {
console.log('first callback: ' + val.x++);
});
p.then(function(val) {
console.log('second callback: ' + val.x)
})
// first callback: 1
// second callback: 2
1.5 Generator
上面所有的方法均是基于回調函數(shù)來完成異步操作的，無非是對回調函數(shù)進行封裝而已。ES6里面提出了Generator，增加了解決異步操作的途徑，不再依據(jù)回調函數(shù)來完成。
Generator最大的特點就是可以實現(xiàn)函數(shù)的暫停、重啟，這個特性非常有利于解決異步操作。將Generator的暫停與promise的異常處理結合起來，可以比較優(yōu)雅地解決異步編程問題。具體實現(xiàn)參考：Kyle Simpson
2. 異步編程存在的問題
2.1 異常處理
a) 異步事件包括兩個環(huán)節(jié)：發(fā)出異步請求、結果處理，這兩個環(huán)節(jié)通過event loop來連接起來。那么try catch來進行異常捕獲的時候就需要分來捕獲。
try {
asyncEvent(callback);
} catch(err) {
......
}
上述代碼是無法捕獲callback里面的異常，只能獲取發(fā)出請求環(huán)節(jié)的異常。這樣就存在問題：假如請求的發(fā)出和請求的處理是兩個人完成的，那么在異常處理的時候就存在問題？
b）promise實現(xiàn)異常的傳遞，這帶來一些好處，在實際項目中保證代碼不被阻塞。但是如果異步事件比較多的時候，不容易找出到底是那個異步事件產(chǎn)生了異常。
// 場景描述： 在CRM里面展示價格的報警信息，其中包含競對的信息。但是獲取競對的信息時間比較長，后端為了避免慢查詢，就把一條記錄拆成兩塊分別獲取。
// 第一步：獲取價格報警信息，除了競對信息
function getPriceAlarmData() {
return new Promise(function(resolve) {
Y.io(url, {
method: 'get',
data: params,
on: function() {
success: function(id, data) {
resolve(alarmData);
}
}
});
});
}
// 得到報警信息后，在去獲取競對信息
getPriceAlarmData().then(function(data) {
// 數(shù)據(jù)渲染，除了競對信息
render(data);
return new Promise(function(resolve) {
Y.io(url, {
method: 'get',
data: {alarmList: data},
on: function() {
success: function(id, compData) {
resolve(compData);
}
}
});
});
}) // 獲取完所有數(shù)據(jù)后進行競對信息的渲染
.then(function(data) {
// 渲染競對信息
render(data)
}, function(err) {
// 異常處理
console.log(err);
});
可以把上述代碼轉換成如下：
try{
// 獲取除競對以外的報警信息
var alarmData = alarmDataExceptCompare();
render(alarmData);
// 根據(jù)報警信息查詢競對信息
var compareData = getCompareInfo(alarmData);
render(compareData);
} catche(err) {
console.log(err.message);
}
在上述例子中把異常處理放到最后進行處理，這樣當其中存在某個環(huán)節(jié)出現(xiàn)異常，我們無法準確知道到底是哪個事件產(chǎn)生的。
2.2 jQuery.Deferred 的問題
jQuery中也實現(xiàn)了異步操作，但是在實現(xiàn)上不符合promise/A+規(guī)范，主要表現(xiàn)在以下幾個方面：
a. 參數(shù)的個數(shù)：標準的Promise只能接受一個參數(shù)，而jQuery中則可以傳遞多個參數(shù)
function asyncInJQuery() {
var d = new $.Deferred();
setTimeout(function() {
d.resolve(1, 2);
}, 100);
return d.promise()
}
asyncInJQuery().then(function(val1, val2) {
console.log('output: ', val1, val2);
});
// output: 1 2
b. 結果處理中異常的處理
function asyncInPromise() {
return new Promise(function(resolve) {
setTimeout(function() {
var jsonStr = '{"name": "mt}';
resolve(jsonStr);
}, 100);
});
}
asyncInPromise().then(function(val) {
var d = JSON.parse(val);
console.log(d.name);
}).then(null, function(err) {
console.log('show error: ' + err.message);
});
// show error: Unexpected end of input
function asyncInJQuery() {
var d = new $.Deferred();
setTimeout(function() {
var jsonStr = '{"name": "mt}';
d.resolve(jsonStr);
}, 100);
return d.promise()
}
asyncInJQuery().then(function(val) {
var d = JSON.parse(val);
console.log(d.name);
}).then(function(v) {
console.log('success: ', v.name);
}, function(err){
console.log('show error: ' + err.message);
});
//Uncaught SyntaxError: Unexpected end of input
從中可以看出，Promise對回調函數(shù)進行了結果處理，可以捕獲回調函數(shù)執(zhí)行過程中的異常，而jQuery.Deferred卻不可以。
相關文章
如何在Nestjs和Vue3中使用socket.io示例詳解
這篇文章主要為大家介紹了如何在Nestjs和Vue3中使用socket.io示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
基于Nodejs利用socket.io實現(xiàn)多人聊天室
這篇文章講述了websocket無到有，根據(jù)協(xié)議，分析數(shù)據(jù)幀的頭，進行構建websocket。雖然代碼短，但可以很好地體現(xiàn)websocket的原理。對nodejs利用socket 實現(xiàn)多人聊天室功能感興趣的朋友一起看看吧2017-02-02
今天小編就為大家分享一篇關于如何使用puppet替換文件中的string，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
nodejs遍歷文件夾下并操作HTML/CSS/JS/PNG/JPG的方法
這篇文章主要介紹了nodejs遍歷文件夾下并操作HTML/CSS/JS/PNG/JPG的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要給大家介紹了如何查看node端口被占用并殺死,文中給出了相關的解決方法,并通過代碼示例給大家介紹的非常詳細,對前端開發(fā)要學會如何查看端口占用并殺死非常有用,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Node.js的包詳細介紹,Node.js的包是一個目錄,其中包含JSON格式的包說明文件package.json,Node.js的包基本遵循CommonJS規(guī)范,需要的朋友可以參考下2015-01-01
Nodejs中調用系統(tǒng)命令、Shell腳本和Python腳本的方法和實例
這篇文章主要介紹了Nodejs中調用系統(tǒng)命令、Shell腳本和Python腳本的方法和實例,本文給出了利用子進程調用系統(tǒng)命令、執(zhí)行系統(tǒng)命令、調用傳參數(shù)的shell腳本、調用python腳本的例子,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了Node.js 制作實時多人游戲框架,需要的朋友可以參考下2015-01-01
本文主要介紹了安裝 node-Sass 報錯的解決記錄(三步解決法)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
Windows系統(tǒng)下安裝Node.js的步驟圖文詳解
這篇文章主要給大家介紹了Windows系統(tǒng)下Node.js的安裝教程，Node.js是用于后端編程的JavaScript框架，文中給出了詳細圖文介紹，有需要的朋友可以參考下，下面來一起看看吧。2016-11-11