01——Promise介绍

最新推荐文章于 2025-03-24 12:13:01 发布

原创最新推荐文章于 2025-03-24 12:13:01 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

Promise 专栏收录该内容

14 篇文章

订阅专栏

这篇博客通过一个点击抽奖的示例，介绍了如何使用Promise来处理异步操作。传统方式使用了回调函数，而Promise的实现则更加清晰，通过resolve和reject改变Promise状态，并使用then处理中奖和未中奖两种情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.初始Promise

在这里插入图片描述异步编程举例：这些都使用的回调函数

2.Promise小例子

在这里插入图片描述

<!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>Document</title>
  </head>
  <body>
    <button class="btn">点击抽奖</button>
    <div class="result"></div>
    <script>
      //生成随机数
      function rand(m, n) {
        return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
      }
      const btn = document.querySelector(".btn");
      btn.onclick = function () {
        //普通实现方法
        // setTimeout(()=>{
        //   let n=rand(1,100)
        //   if(n<=30){
        //     alert("恭喜中奖")
        //   }else{
        //     alert('再接再厉')
        //   }
        // })

        //promise形式实现
        const p = new Promise((resolve, reject) => {
          setTimeout(() => {
            let n = rand(1, 100);
            if (n <= 30) {
              resolve(n); //resolve调完之后将promise对象的状态设置为成功
            } else {
              reject(n); //reject将promise对象的状态设置为失败
            }
          });
        });
        //调用then方法 两个参数都是函数类型的值
        //value值
        //reason理由
        p.then(
          (value) => {
            alert("恭喜中奖 您的中奖数字为"+value);
          },
          (reason) => {
            alert("再接再励 您的号码为"+reason);
          }
        );
      };
    </script>
  </body>
</html>