关于promise用法示例及实现原理

最新推荐文章于 2024-01-25 17:28:43 发布

Sylvia_2000

最新推荐文章于 2024-01-25 17:28:43 发布

阅读量178

点赞数 1

分类专栏：前端 JavaScript 文章标签： js javascript 前端

本文链接：https://blog.csdn.net/ciel_2/article/details/112297269

版权

前端同时被 3 个专栏收录

29 篇文章 2 订阅

订阅专栏

2020

18 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

文章目录

1.用法示例
2.ES7写法
3.实现promise原理

1.用法示例

    lilei('yo~~').then(hanmeimei).then(liming)
    
    function lilei(bang){
      return new Promise((open)=>{
        console.log('李雷起跑')
        setTimeout(() => {
          console.log('李雷到达终点')
          console.log(bang)
          open(bang)
        }, 5000);
      })
    }
    function hanmeimei(bang){
      return new Promise((open)=>{
        console.log('韩梅梅起跑')
        setTimeout(() => {
          console.log('韩梅梅到达终点')
          console.log(bang)
          open(bang)
        }, 5000);
      })
    }
    function liming(bang){
      return new Promise((open)=>{
        console.log('李明起跑')
        setTimeout(() => {
          console.log('李明到达终点')
          console.log(bang)
          console.log('结束')
          open(bang)
        }, 5000);
      })
    }

2.ES7写法

<!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>
            // ES7写法
            (async function(){ // 代替.then的写法
                var bang = await lilei('yo~')
                //       ← open(bang)  给open的值相当于return
                bang = await hanmeimei(bang)
                //   ← open(bang)  给open的值相当于return
                await liming(bang)
            })()
             
            // lilei('yo~~~').then(hanmeimei).then(liming)
            function lilei(bang){
                return new Promise((open)=>{
                    console.log('李雷起跑')
                    setTimeout(() => {
                        console.log('李雷到达终点')
                        console.log(bang)
                        open(bang)
                    }, 5000);
                })
            }

            function hanmeimei(bang){
                return new Promise((open)=>{
                    console.log('韩梅梅起跑')
                    setTimeout(() => {
                        console.log('韩梅梅到达终点')
                        console.log(bang)
                        open(bang)
                    }, 5000);
                })
            }

            function liming(bang){
                return new Promise((open)=>{
                    console.log('李明起跑')
                    setTimeout(() => {
                        console.log('李明到达终点')
                        console.log(bang)
                        console.log('结束')
                        open(bang)
                    }, 5000);
                })
            }
    </script>
</body>
</html>

3.实现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>
    function MyPromise(task){
      console.log('enter MyPromise')
      var self = this // 获得当前对象

      self.status = 'pending' // 在对象内部，维持一个状态变量，默认pending，说明不能继续下一项任务；如果状态为open，说明可以继续下一项任务
      self.data // promise要交给下一项任务的参数值
      self.nextTask // 保存下一项任务
      // 定义open函数，其中包含打开开关时要执行的操作
      // 将open函数交给当前任务，在当前任务内，等执行完自动调用open
      function open(data){
        // 如果状态为pending，先改为open
        if(self.status === 'pending'){
          self.status = 'open'
          // 调用提前保存好的then给的下一项任务函数，并将open的参数，继续传递给下一个任务
          if(typeof self.nextTask === 'function'){
            self.nextTask(data)
          }
        }
      }
      task(open)
    }

    MyPromise.prototype.then = function(nextTask){
      // 当用当前对象调用then时，将then中的下一个任务函数保存到当前对象的nextTask变量，等待执行
      this.nextTask = nextTask
    }

    lilei('yo~~').then(hanmeimei)
    function lilei(bang){
      return new MyPromise((open)=>{
        console.log('李雷起跑')
        setTimeout(() => {
          console.log('李雷到达终点')
          console.log(bang)
          open(bang)
        }, 5000);
      })
    }
    function hanmeimei(bang){
      return new MyPromise((open)=>{
        console.log('韩梅梅起跑')
        setTimeout(() => {
          console.log('韩梅梅到达终点')
          console.log(bang)
          open(bang)
        }, 5000);
      })
    }
    function liming(bang){
      return new MyPromise((open)=>{
        console.log('李明起跑')
        setTimeout(() => {
          console.log('李明到达终点')
          console.log(bang)
          console.log('结束')
          open(bang)
        }, 5000);
      })
    }
  </script>
</body>
</html>