promise

2021-08-04 23:33:38 阅读：233 来源： 互联网

标签：resolve console log Promise reject promise

1.promise理解

promise是ES6引入的可以进行异步编程的新方法，可以解决回调地狱的问题

2.promise初步使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h2 class="page-header">Promise 初体验</h2>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>
    <script>
        //生成随机数
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
        }
        // 获取元素
        const btn = document.querySelector('#btn')
        // 绑定单击事件
        btn.addEventListener('click', function () {
            // 创建promise实例
            var p = new Promise((reslove, reject) => {
                setTimeout(() => {
                    let n = rand(1, 100)
                    if (n <= 50) {
                        // resolve是一个函数
                        // 将promise函数的状态设置为成功
                        // 调用成功的函数
                        // 并将结果传递过去
                        reslove(n)
                    } else {
                        reject(n)
                    }
                },1000)
                // 第一个参数是成功的回调,还可以获取成功失败的结果值
                // 第二个参数是失败的回调
            })
            p.then((n) => {
                alert('恭喜中奖,你的号码是'+n)
            },
                (n) => {
                    alert('再接再厉,你的号码是'+n)
                }
            )
        })
    </script>
</body>

</html>

3.promise Api

创建一个新的promise对象的时候，promise里面的第一个参数是同步执行的。

.then里面的代码是异步执行的

promise.resolve，这个resolve不同于上面实例对象上的方法resolve，这个是Primise函数对象的

如果传入的值是一个非promise对象的值，那么promise的状态会变成fullfield或者resolved（意义相同）；如果传入一个promise对象，那么传入的promise对象的状态和结果是什么，promise.resolve的结果就是什么

promise.reject，这个reject不同于上面实例对象上的方法reject，这个是Primise函数对象的，这个方法里面不管传入什么，状态都是失败，都是reject。

promise.all，需要传入一个promise数组，只要有一个失败，promise.all的状态就是失败。都成功以后，promise.all的结果就是传入promise数组的结果

promise.race，返回的结果是执行最快的那个

4. promise 的关键问题

如何改变 promise 的状态?

(1) resolve(value): 如果当前是 pending 就会变为 resolved

(2) reject(reason): 如果当前是 pending 就会变为 rejected

(3) 抛出异常: 如果当前是 pending 就会变为 rejected

promise是先改变状态还是先执行回调操作？

当执行器里面的内容是可以同步执行的时候，应该是先改变状态，再执行回调函数。

当执行器里面是异步代码的时候，应该是先执行回调函数，再去改变状态

什么时候可以拿到promise处理结果的数据？

当执行器里面是同步代码，等状态改变，再去执行回调函数。

当执行器里面是异步代码的时候，要先等执行器里面的异步代码执行完毕，改变了状态，再去处理回调函数

promise.then的状态和结果是由什么决定的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        var p = new Promise((resolve, reject) => {
            resolve('ok111kk')
        })
        // rlt返回的也是一个promise对象
        let rlt = p.then((val) => {
            // 1.当这里抛出了错误
            // rlt的状态是reject，结果就是抛出的错误
            // throw '出问题了'

            // 2.当这里返回的结果是一个非Primose类型的对象
            // rlt的状态是fulfilled，结果就是返回的内容
            // return 123

            // 3.当这里返回的是一个Promise类型的对象
            // rlt的状态是Promise对象的状态，，结果是Promise对象的结果
            return new Promise((resolve,reject)=>{
                resolve(val)
            })
            // console.log(val)
        }, () => {

        })
        console.log(rlt)
    </script>
</body>

</html>

promise的链式调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('11')
            }, 1000)
        })
        p.then((val) => {
            console.log(val)//11
            return new Promise((resolve, reject) => {
                resolve('22')
            })

        })
            .then(val => {
                console.log(val)//22
            })
    </script>
</body>

</html>

promise异常穿透，不管是状态失败还是在then里面某一个会回调失败或者跑出错误都会穿透到最后的catch里面，进行失败的处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise关键问题 - 异常穿透</title>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
                // reject('Err');
            }, 1000);
        });

        p.then(value => {
            // console.log(111);
            throw '失败啦!';
        }).then(value => {
            console.log(222);
        }).then(value => {
            console.log(333);
        })
        // 异常只需要在最后调用catch方法处理失败的情况
        .catch(reason => {
            console.warn(reason);
        });
    </script>
</body>
</html>

中断promise链？

 let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        });

        p.then(value => {
            console.log(111);
            //有且只有一个方式
            return new Promise(() => {});
        }).then(value => {
            console.log(222);
        }).then(value => {
            console.log(333);
        }).catch(reason => {
            console.warn(reason);
        });

就是返回一个pending状态的promise，当某一个promise返回pending状态的promise，那么then方法的状态也是pending，为pending的话，状态就没有改变，后面的回调函数都不会执行

cocode\code\promise

标签：resolve,console,log,Promise,reject,promise
来源： https://blog.csdn.net/cheeto/article/details/119392010

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

ICode9

promise

1.promise理解

2.promise初步使用

3.promise Api

4. promise 的关键问题