回调地狱

最新推荐文章于 2023-07-06 20:36:54 发布

想吃可爱多

最新推荐文章于 2023-07-06 20:36:54 发布

阅读量354

点赞数

分类专栏： ajax 文章标签：回调地狱

本文链接：https://blog.csdn.net/weixin_43739375/article/details/88698670

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

这种代码形式就产生了回调地狱，代码会变得非常冗杂,可以利用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实例,因此可以采用链式写法
在这里插入图片描述
catch函数: 用于指定发生错误时的回调函数, 可以看成是 .then( null, reject() );当执行多个then操作时,建议用catch进行错误处理, 不用每个then函数都写一个reject的回调函数

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>