ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

es6-Promise解决回调地狱

2021-10-25 15:02:22  阅读:186  来源: 互联网

标签:function es6 地狱 res JSON ajax Promise type data


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)
    })

标签:function,es6,地狱,res,JSON,ajax,Promise,type,data
来源: https://blog.csdn.net/qq_39407747/article/details/120952053

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有