回调地狱

回调地狱就是在实现完成一个请求之后再发送另一个请求这样的需求的时候，造成的极不易维护的代码：在回调中不停的嵌套回调。

$.ajax({
  url: './aa.json',
  type: 'get',
  success: result => {
    $.ajax({
      url: './bb.json',
      type: 'get',
      success: result => {
        $.ajax({
          url: './bb.json',
          type: 'get',
          success: result => {
            //...
          }
        });
      }
    });
  }
});

基于发布订阅模式解决回调地狱

基于发布订阅管理起来较为方便，但是，你需要回调一个事情，就需要创建一个计划表。

let $planA = $.Callbacks(),
    $planB = $.Callbacks();
$.ajax({
  url: './data.json',
  type: 'get',
  success: result => {
    $planA.fire(result);
  }
});
$planA.add(result => {
  $.ajax({
    url: './data2.json',
    type: 'get',
    success: result => {
      $planB.fire(result);
    }
  })
});
$planB.add(result=>{
  //...
});

基于 Promise 解决回调地狱

这是一个最完美的解决方案，可以清晰的看出代码的流程，用法也特别简单。

//=> 将三个异步操作独立封装，都返回 Promise 实例
let queryA = function queryA() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'data.json',
      type: 'get',
      success(result) {
        resolve(result);
      },
      error(msg) {
        reject(msg);
      }
    });
  });
}
let queryB = function queryA() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'data.json',
      type: 'get',
      success(result) {
        resolve(result);
      },
      error(msg) {
        reject(msg);
      }
    });
  });
}
let queryC = function queryA() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'data.json',
      type: 'get',
      success(result) {
        resolve(result);
      },
      error(msg) {
        reject(msg);
      }
    });
  });
}
//=> 再利用 promise 管控这个三个异步操作
let promise = queryA();
promise.then(result => {
  console.log('A', result);
  //=> 上一个 then 中函数手动返回一个新的 Promise 实例管理一个异步操作
  // 下一个 then 会等上一个 then 中的异步成功后再执行
  return queryB();
}).then(result => {
  console.log('B', result);
  return queryC();
}).then({
  console.log('C', result);
});