初识Promise

最新推荐文章于 2024-09-15 21:53:26 发布

爱学习小㿟

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量50

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_46472711/article/details/127755820

版权

初识Promise

异步编程
Promise是用来干甚的?
异步编程案例
- 回调函数实现
- Promise实现
小结

异步编程

异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。
简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

Promise是用来干甚的?

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

异步编程案例

在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>Promise</title>
</head>
<body>
  <div class="cotainer">
    <h2>Promise 初体验</h2>
    <button id="btn">点击抽奖</button>
  </div>
  <script>
      function rand(m,n){
        return Math.ceil(Math.random()* (n-m+1)) + m-1
      }
      let btn = document.getElementById('btn')

      btn.onclick = function(){
        setTimeout(()=>{
          let a = rand(1,100)
          if(a<=30)alert('中奖了!!')
          else alert('很遗憾没有中奖!!')
        },1000)
      }
  </script>
</body>
</html>

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>Promise</title>
</head>
<body>
  <div class="cotainer">
    <h2>Promise 初体验</h2>
    <button id="btn">点击抽奖</button>
  </div>
  
  <script>
      function rand(m,n){
        return Math.ceil(Math.random()* (n-m+1)) + m-1
      }
      let btn = document.getElementById('btn')

      btn.onclick = function(){
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
              let a = rand(1,100)
              if(a<=30)resolve()
              else reject()
          },1000)
        })

        p.then(()=>{
          alert('恭喜你中奖了！！');
        },()=>{
          alert('很遗憾,你没有中奖！！');
        })
      }

  </script>
</body>
</html>