回调地狱

最新推荐文章于 2025-06-22 16:57:47 发布

原创最新推荐文章于 2025-06-22 16:57:47 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了解决异步编程中回调地狱问题的方法。通过使用ES6的Promise，将复杂的层层嵌套回调转换为清晰的链式调用，极大提高了代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于回调地狱，就是函数层层嵌套，试想一下，有3个异步请求，第二个以及第三个需要用到前面请求成功的数据，我们会想着，层层嵌套函数来进行处理，例如

ajax({
        url: url1,
        success: function(data) {
            ajax({
                url: url2,
                data: data,
                success: function(data) {
	            ajax({
	                url: url3,
	                data: data,
	                success: function() {
	                }
	            });
	        }
            });
        }
    });

这种代码形式就产生了回调地狱，代码会变得非常冗杂,可以利用es6的promise来解决这个问题

Promise的设计初衷是避免异步回调地狱. 它提供更简洁的api, 同时展平回调为链式调用, 使得代码更加清爽, 易读.<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Promise 学习笔记</title>
        <script type="text/javascript">
            window.onload = function() {
                function pms1() {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('执行任务1');
                            resolve('执行任务1成功');
                        }, 2000);
                    });
                }

                function pms2() {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('执行任务2');
                            resolve('执行任务2成功');
                        }, 2000);
                    });
                }

                function pms3() {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('执行任务3');
                            resolve('执行任务3成功');
                        }, 2000);
                    });
                }
                pms1().then(function(data) {
                        console.log('第1个回调：' + data);
                        return pms2();
                    })
                    .then(function(data) {
                        console.log('第2个回调：' + data);
                        return pms3();
                    })
                    .then(function(data) {
                        console.log('第3个回调：' + data);
                        return '还没完！该结束了吧！'
                    }).then(function(data) {
                        console.log(data);
                    });
            }
        </script>
    </head>

    <body>

    </body>

</html>

这样就非常好的解决了回调地狱这个问题