promise

最新推荐文章于 2025-02-13 14:26:15 发布

原创最新推荐文章于 2025-02-13 14:26:15 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文深入讲解了ES6中Promise的概念及使用方法，包括解决回调地狱问题、API详解、链式调用、异常穿透及如何中断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