建站
咨詢
售后
建站咨詢
新聞中心
今天小編給大家分享一下javascript回調(diào)問題如何解決的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
成都創(chuàng)新互聯(lián)公司服務(wù)項目包括定邊網(wǎng)站建設(shè)、定邊網(wǎng)站制作、定邊網(wǎng)頁制作以及定邊網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，定邊網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到定邊省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
回調(diào)地獄
對 JavaScript 程序員來說，處理回調(diào)是家常，但是處理層次過深的回調(diào)就沒有那么美好了，下面的示例代碼片段用了三層回調(diào)，再補(bǔ)腦一下更多層的場景，簡直是酸爽，這就是傳說中的回調(diào)地獄。
getDirectories(function(dirs) {
getFiles(dirs[0], function(files) {
getContent(files[0], function(file, content) {
console.log('filename:', file);
console.log(content);
});
});
});
function getDirectories(callback) {
setTimeout(function() {
callback(['/home/ben']);
}, 1000);
}
function getFiles(dir, callback) {
setTimeout(function() {
callback([dir + '/test1.txt', dir + '/test2.txt']);
}, 1000)
}
function getContent(file, callback) {
setTimeout(function() {
callback(file, 'content');
}, 1000)
}解決方案
生態(tài)圈中有很多異步解決方案可以處理回調(diào)地獄的問題，比如 bluebird、Q 等，本文重點(diǎn)介紹 ECMAScript 6/7 規(guī)范中對異步編程的支持。
ES6 Promise
Promise 是一種異步編程的解決方案，是解決回調(diào)地獄問題的利器。
Promise 在 JavaScript 生態(tài)圈被主流接受是在 2007 年 Dojo 框架增加了 dojo.Deferred 的功能。隨著 dojo.Deferred 的流行，在 2009 年 Kris Zyp 提出了 CommonJS Promises/A 規(guī)范。隨后生態(tài)圈中出現(xiàn)了大量 Promise 實(shí)現(xiàn)包括 Q.js、FuturesJS 等。當(dāng)然 Promise 之所有這么流行很大程度上是由于 jQuery 的存在，只是 jQuery 并不完全遵守 CommonJS Promises/A 規(guī)范。隨后正如大家看到的，ES 6 規(guī)范包含了 Promise。
MDN 中對 Promise 是這樣描述的：
Promise 對象是一個返回值的代理，這個返回值在promise對象創(chuàng)建時未必已知。它允許你為異步操作的成功或失敗指定處理方法。 這使得異步方法可以像同步方法那樣返回值：異步方法會返回一個包含了原返回值的
以下的代碼是「回調(diào)地獄」一節(jié)中的示例通過 Promise 實(shí)現(xiàn)，看上去代碼也不是很簡潔，但是比起傳統(tǒng)的層級回調(diào)有明顯改善，代碼可維護(hù)性和可讀性更強(qiáng)。
getDirectories().then(function(dirs) {
return getFiles(dirs[0]);
}).then(function(files) {
return getContent(files[0]);
}).then(function(val) {
console.log('filename:', val.file);
console.log(val.content);
});
function getDirectories() {
return new Promise(function (resolve, reject) {
setTimeout(function() {
resolve(['/home/ben']);
}, 1000);
});
}
function getFiles(dir) {
return new Promise(function (resolve, reject) {
setTimeout(function() {
resolve([dir + '/test1.txt', dir + '/test2.txt']);
}, 1000);
});
}
function getContent(file) {
return new Promise(function (resolve, reject) {
setTimeout(function() {
resolve({file: file, content: 'content'});
}, 1000);
});
}ES6 Generator
Promise 的實(shí)現(xiàn)方式還不夠簡潔，我們還需要更好的選擇，co 就是選擇之一。co 是基于 Generator（生成器）的異步流控制器，了解 co 之前首先需要理解 Generator。熟悉 C# 的同學(xué)應(yīng)該都有了解，C# 2.0 的版本就引入了 yield 關(guān)鍵字，用于迭代生成器。ES 6 Generator 跟 C# 相似，也使用了 yield 語法糖，內(nèi)部實(shí)現(xiàn)了狀態(tài)機(jī)。具體用法可以參考 MDN 的文檔 function* 一節(jié)，原理可以參考AlloyTeam 團(tuán)隊 Blog 深入理解 Generator。使用 co 巧妙結(jié)合 ES6 Generator 和 ES6 Promise 讓異步調(diào)用更加和諧。
co(function* (){
var dirs = yield getDirectories();
var files = yield getFiles(dirs[0]);
var contentVal = yield getContent(files[0]);
console.log('filename:', contentVal.file);
console.log(contentVal.content);
});co 非常巧妙，其核心代碼可以簡化如下的示例，大體思路是采用遞歸遍歷生成器直到狀態(tài)完成，當(dāng)然 co 做的跟多。
runGenerator();
function* run(){
var dirs = yield getDirectories();
var files = yield getFiles(dirs[0]);
var contentVal = yield getContent(files[0]);
console.log('filename:', contentVal.file);
console.log(contentVal.content);
}
function runGenerator(){
var gen = run();
function go(result){
if(result.done) return;
result.value.then(function(r){
go(gen.next(r));
});
}
go(gen.next());
}ES7 Async/Await
ES6 Generator 確實(shí)很好，只可惜需要第三方庫的支持。好消息是 ES 7 會引入 Async/Await 關(guān)鍵字完美解決異步調(diào)用的問題。好吧，.net 又領(lǐng)先了一步，.net framework 4.5 已經(jīng)率先支持了。
今后的代碼寫起來是這樣：
run();
async function run() {
var dirs = await getDirectories();
var files = await getFiles(dirs[0]);
var contentVal = await getContent(files[0]);
console.log('filename:', contentVal.file);
console.log(contentVal.content);
}以上就是“javascript回調(diào)問題如何解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享標(biāo)題：javascript回調(diào)問題如何解決
URL地址：http://www.dlmjj.cn/article/jsgjge.html
