JavaScript中的回調地獄及解決方法

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 里的回調函數

4、Generator 函數

// 用 co 模塊自動執行
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