您现在的位置是:首页>学习分享
es6-Promise解决回调地狱 2019-09-11 241 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)
    })
这就很很好的解决了回调地狱的问题


文章评论
关注我们
  • 微信公众号
  • 我的微信

站点声明:

1、本网站文章部分出自互联网,如无意中侵犯了某个媒体或个人的知识产权,请来信(987354940@qq.com)告之,本网站将立即删除。

Copyright © www.zhangqingblog.com All Rights Reserved. 备案号:鄂ICP备18005731号-2