JavaScript中的回調地獄及解決方法
阿新 • • 發佈:2019-03-01
reject 方法 第一個 代碼 async end 鏈式 eject code 對象(即有異步操作),這時後一個回調函數,就會等待該
1、回調地獄
在使用JavaScript時,為了實現某些邏輯經常會寫出層層嵌套的回調函數,如果嵌套過多,會極大影響代碼可讀性和邏輯,這種情況也被成為回調地獄。比如說你要把一個函數 A 作為回調函數,但是該函數又接受一個函數 B 作為參數,甚至 B 還接受 C 作為參數使用,就這樣層層嵌套,人稱之為回調地獄,代碼閱讀性非常差。比如:
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、解決回調地獄
解決回調地獄有很多方法,比如:Promise 對象、Generator 函數、async 函數
3、Promise 對象解決回調地獄
采用鏈式的 then,可以指定一組按照次序調用的回調函數。這時,前一個 then 裏的一個回調函數,返回的可能還是一個 Promise
Promise
對象的狀態發生變化,才會被調用。由此實現異步操作按照次序執行。
var sayhello = function (name) { return new Promise(function (resolve, reject) { setTimeout(function () { console.log(name); resolve(); //在異步操作執行完後執行 resolve() 函數 }, 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 方法指定的回調函數,返回的是另一個Promise
對象。這時,第二個then
方法指定的回調函數,就會等待這個新的Promise
對象狀態發生變化。如果變為resolved
,就繼續執行第二個 then 裏的回調函數
JavaScript中的回調地獄及解決方法