回调地狱

柔光的暖阳◎ 2022-03-02 15:48 310阅读 0赞

**回调地狱，就是函数作为参数层层嵌套**  
试想一下，有3个异步请求，第二个以及第三个需要用到前面请求成功的数据，我们会想着，层层嵌套函数来进行处理，例如  
![在这里插入图片描述][20190320202647731.png]

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

**Promise是什么**  
是一个构造函数，用来传递异步操作消息，链式调用，避免层层嵌套的回调函数。  
promise接收两个函数参数，resolve和reject，分别表示异步操作执行成功后的回调和失败的回调  
promise在声明的时候就已经执行了  
有三种状态：pending进行中、resolve已完成、rejected已失败,  
这些状态只能由pending -> resolved, pending -> rejected,一旦promise实例发生改变，就不能在变了，任何时候都能得到这个结果

Promise一旦新建就立刻执行, 此时的状态是Pending(进行中),它接受两个参数分别是resolve和reject.它们是两个函数.  
resolve函数的作用是将Promise对象的状态从’未完成’变为’成功’(由Pending变为Resolved), 在异步操作成功时,将操作结果作为参数传递出去;  
reject函数的作用是将Promise对象的状态从’未完成’变为失败(由Pending变为Rejected),在异步操作失败时调用,并将异步操作的错误作为参数传递出去.

**Promise的用法**  
1.生成Promise实例  
2.执行一系列同步操作  
3.使用resolve函数将异步操作的结果传递出去, reject函数传递异步操作的错误  
4.用then方法分别指定Resolve状态和Reject状态的函数,then方法返回一个新的Promise实例,因此可以采用链式写法  
![在这里插入图片描述][20190320204243589.png]  
catch函数: 用于指定发生错误时的回调函数, 可以看成是 .then( null, reject() );当执行多个then操作时,建议用catch进行错误处理, 不用每个then函数都写一个reject的回调函数  
![在这里插入图片描述][20190320204446765.png]  
catch回捕捉到前面执行时发生的错误.

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>

[20190320202647731.png]: /images/20220302/ebb29623418d49c2868c0ca7fa4a9a0a.png?
[20190320204243589.png]: /images/20220302/c07b2dcdb31e4d89828c371d5481915b.png?
[20190320204446765.png]: /images/20220302/bc9a368ba6a9489e8facd6c20c4b49cb.png