首页 > 其他分享> 文章详细

ES6 - promise（3）

2021-12-27 20:36:59 阅读：146 来源： 互联网

标签：异步 resolve ES6 promise reject 参数 btn

上一篇熟悉了promise的具体过程：

promise的过程：

启动异步任务 => 返回promise对象 =>给promise对象绑定回调函数（甚至可以在异步任务结束后指定多个）。

从promise的概念：{

1.promise是es6引入的一门新的JS的解决异步编程的方案。

2.从语法来说promise是一个构造函数

3.从功能上来说promise是一个封装了一个异步操作并可以获取其成功/失败结果的值的一个对象

}

我们可以知道promise不仅仅是封装了一个异步操作，并且可以获取其成功/失败结果的值。

还是以抽奖为例子，我们在抽奖的结果中加上所抽的号码

从代码中可以得知,resolve和reject都可以携带参数，并且在下面通过promise对象的实例调用then方法时，在回调函数的参数中接收resolve和reject携带的参数

源码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise(2)</title>
</head>

<body>
    <div class="container">
        <div id="btn">抽个奖</div>
    </div>
</body>

<script>
    function random(m, n) {
        return Math.ceil(Math.random() * (n - m + 1)) + m - 1
    }//生成随机数

    const btn = document.querySelector('#btn')
    //获取按钮的dom元素
    btn.addEventListener('click', function () {


        //resolve 解决  函数类型数据
        //reject 拒绝  函数类型数据
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                let t = random(1, 100)
                if (t < 50) {
                    resolve(t)//成功后的回调,将promise对象的状态设置为【成功】，并携带参数
                } else {
                    reject(t)//失败后的回调，将promise对象的状态设置为【失败】，并携带参数
                }
            }, 2000)
        })
        //用实例化后的promise对象调用then方法，在参数中传入成功/失败后要执行的方法
        p.then((t) => {//在箭头函数中接收resolve和reject携带的参数
            alert('恭喜中奖,'+'中奖号码为：'+t)
        }, (t) => {
            alert("再接再厉,"+'您的号码为： '+t)
        })

    })
</script>
<style>
    .container {
        width: 100%;
        height: 1000px;
        background-color: aquamarine;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #btn {
        width: 150px;
        height: 50px;
        background-color: rgb(217, 217, 230);
        border-radius: 25px;
        text-align: center;
        line-height: 50px;

    }
</style>

</html>

标签：异步,resolve,ES6,promise,reject,参数,btn
来源： https://www.cnblogs.com/SadicZhou/p/15737728.html

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

ICode9

ES6 - promise（3）