解决回调地狱问题

Posted 2022-12-27 psxiao

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