1、什么是回调地狱?

假如我们有很多异步事件，而这些异步事件又有很紧密的联系，比如一个异步事件要依赖另一个异步事件的返回值，看下面的：

$.ajax({
        url: '',
        data: {},
        type: 'post',
        dataType: JSON,
        success: function (res) {
            $.ajax({
                url: '',
                data: res.data,
                type: 'post',
                dataType: JSON,
                success: function (res1) {
                    $.ajax({
                        url: '',
                        data: res1.data,
                        type: 'post',
                        dataType: JSON,
                        success: function (res2) {
                            $.ajax({
                                url: '',
                                data: res2.data,
                                type: 'post',
                                dataType: JSON,
                                success: function (res3) {
                                    console.log(res3)
                                }
                            })
                        }
                    })
                }
            })
        }
    })

是不是进入了一环套一环的地狱里面。我们可以简单处理下：

  function ajax1() {
        $.ajax({
            url: '',
            data: {},
            type: 'post',
            dataType: JSON,
            success: function (res) {
                ajax2(res.data)
            }
        })
    }
    function ajax2(data) {
        $.ajax({
            url: '',
            data: data,
            type: 'post',
            dataType: JSON,
            success: function (res) {
                ajax3(res.data)
            }
        })
    }
    function ajax3(data) {
        $.ajax({
            url: '',
            data: data,
            type: 'post',
            dataType: JSON,
            success: function (res) {
                console.log(res)
            }
        })
    }
    ajax1();

 这样虽然把每个ajax请求放在了函数里面，不用把所有请求放在一个方法里面，但实际上还是在函数里面一层一层的嵌套来实现，很不便于阅读和维护

2、看看promise是如何解决的

promise的出现就是为了解决异步编程中的回调问题，它提供了统一的 API

 const ajax1 = new Promise(function (resolve,reject) {
        $.ajax({
            url: '',
            data: {},
            type: 'post',
            dataType: JSON,
            success: function (res) {
                resolve(res.data)
            }
        })
    })
    function ajax2 (data) {
        return new Promise(function (resolve,reject) {
            $.ajax({
                url: '',
                data: data,
                type: 'post',
                dataType: JSON,
                success: function (res) {
                    resolve(res.data)
                }
            })
        })
    }
    function ajax3 (data) {
        return new Promise(function (resolve,reject) {
            $.ajax({
                url: '',
                data: data,
                type: 'post',
                dataType: JSON,
                success: function (res) {
                    resolve(res.data)
                }
            })
        })
    }
    ajax1.then(function (data) {
        return ajax2(data)
    }).then(function (data) {
        return ajax3(data)
    })