您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168939

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Promise入门

标题Promise入门

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</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 形式实现
            // resolve 解决  函数类型的数据
            // reject  拒绝  函数类型的数据
            const p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    //获取从1 - 100的一个随机数
                    let n = rand(1, 100);
                    //判断
                    if(n <= 50){
                        resolve(n); // 将 promise 对象的状态设置为 『成功』,同时会调用下面the方法的第一个函数
                    }else{
                        reject(n); // 将 promise 对象的状态设置为 『失败』,同时会调用下面the方法的第二个函数
                    }
                }, 1000);
            });
            console.log(p);
            
            //调用 then 方法
            // value 值
            // reason 理由
            p.then((value) => {
                alert('恭喜你加入程序猿队列' + value);// promise 对象的状态为 『成功』时调用
            }, (reason) => {
                alert('加油,你还有机会 ' + reason);// promise 对象的状态为 『失败』时调用
            });
        });
    </script>
</body>

</html>

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进