JavaScript中的回調(diào)地獄及解決方法

1、回調(diào)地獄

在使用JavaScript時，為了實現(xiàn)某些邏輯經(jīng)常會寫出層層嵌套的回調(diào)函數(shù)，如果嵌套過多，會極大影響代碼可讀性和邏輯，這種情況也被成為回調(diào)地獄。比如說你要把一個函數(shù) A 作為回調(diào)函數(shù)，但是該函數(shù)又接受一個函數(shù) B 作為參數(shù)，甚至 B 還接受 C 作為參數(shù)使用，就這樣層層嵌套，人稱之為回調(diào)地獄，代碼閱讀性非常差。比如：

var sayhello = function (name, callback) {setTimeout(function () {console.log(name);callback();}, 1000); } sayhello("first", function () {sayhello("second", function () {sayhello("third", function () {console.log("end");});}); }); //輸出： first second third end

2、解決回調(diào)地獄

解決回調(diào)地獄有很多方法，比如：Promise 對象、Generator 函數(shù)、async 函數(shù)

3、Promise 對象解決回調(diào)地獄

采用鏈?zhǔn)降?then，可以指定一組按照次序調(diào)用的回調(diào)函數(shù)。這時，前一個 then 里的一個回調(diào)函數(shù)，返回的可能還是一個 Promise對象（即有異步操作），這時后一個回調(diào)函數(shù)，就會等待該 Promise對象的狀態(tài)發(fā)生變化，才會被調(diào)用。由此實現(xiàn)異步操作按照次序執(zhí)行。

var sayhello = function (name) {return new Promise(function (resolve, reject) {setTimeout(function () {console.log(name);resolve();　　//在異步操作執(zhí)行完后執(zhí)行 resolve() 函數(shù)}, 1000);}); } sayhello("first").then(function () {return sayhello("second");　　//仍然返回一個 Promise 對象 }).then(function () {return sayhello("third"); }).then(function () {console.log('end'); }).catch(function (err) {console.log(err); }) //輸出：first second third end

上面代碼中，第一個 then 方法指定的回調(diào)函數(shù)，返回的是另一個Promise對象。這時，第二個then方法指定的回調(diào)函數(shù)，就會等待這個新的Promise對象狀態(tài)發(fā)生變化。如果變?yōu)閞esolved，就繼續(xù)執(zhí)行第二個 then 里的回調(diào)函數(shù)

4、Generator 函數(shù)

// 用 co 模塊自動執(zhí)行 var co = require('co'); var sayhello = function (name, ms) {setTimeout(function (name,ms) {console.log(name);}, ms); }var gen = function* () {yield sayhello("xiaomi", 2000);console.log('frist');yield sayhello("huawei", 1000);console.log('second');yield sayhello("apple", 500);console.log('end'); } co(gen());

本文參考https://www.cnblogs.com/wenxuehai/p/10455664.html#_label0

總結(jié)

以上是生活随笔為你收集整理的JavaScript中的回调地狱及解决方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。