我们来考虑下面的场景(有夸张的成分):
1.我们需要通过一个url从服务器加载一个数据data1,data1中包含l下一个请求的url2
2.我们需要通过data1取出url2，从服务器加载数据data2，data2中包含了下一个请求的url3
3.我们需要通过data2取出url3，从服务器加载数据data3，data3中包含了下一个请求的url4
4.发送网络请求url4，获取最终的数据data4

$.ajax('url1', function(data1)){
  $.ajax(data1['url2'], function(data2)){
    $.ajax(data2['url3'], function(data3)){
      $.ajax(data3['url4'], function(data4)){
        consloe.log(data4);
        })
      })
    })
})

上面代码正常情况下没有问题，可以运行并且可以获取我们需要的值
但是一旦代码量多了就不好看不好维护

如何解决地狱回调？
保持你的代码简短(给函数取有意义的名字,见名知意,而非匿名函数,写成一大坨)

模块化(函数封装,打包，每个功能独立,可以单独的定义一个js文件Vue,react中通过import导入就是一种体现)

处理每一个错误

创建模块时的一些经验法则

承诺/生成器/ES6等

Promises:编写异步代码的一种方式，它仍然以自顶向下的方式执行，并且由于鼓励使用try / catch样式错误处理而处理更多类型的错误

Generators:生成器让你“暂停”单个函数，而不会暂停整个程序的状态，但代码要稍微复杂一些，以使代码看起来像自上而下地执行

Async functions:异步函数是一个建议的ES7功能，它将以更高级别的语法进一步包装生成器和继承

Promises三种状态

1.pending：等待状态，比如正在进行网络请求，或者定时器没有到事件
2.fulfill：满足状态，当我们主动回调resolve时，就处于该状态，并且会回调.then()
3.reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()