手撕Promise之从0开始实现完整的Promise的对象-then函数实现

红99

已于 2022-02-24 14:51:50 修改

阅读量338

点赞数

分类专栏： study 前端工程化文章标签： javascript 前端 react.js

于 2022-02-23 15:52:08 首次发布

本文链接：https://blog.csdn.net/weixin_39579517/article/details/123091891

版权

study 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

前端工程化

4 篇文章 0 订阅

订阅专栏

<!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>
  <script>
    var MyPromise = function (fn) {
      // 更新状态和值
      this.PromiseState = 'pending'
      this.PromiseResult = undefined
      // 定义then的回调函数
      this.thenCallback = undefined;
      var _this = this;
      var resolve = function (value) {
        // 智能由pending改变
        if (_this.PromiseState === 'pending') {
          _this.PromiseState = 'fulfilled';
          _this.PromiseResult = value;
           // 判断传入的是不是promise对象
        if (value instanceof MyPromise) {
          // 是promise对象，就在then回调中获得本次结果
          value.then((res)=>{
            if (_this.thenCallback) {
              _this.thenCallback(res)
            }
          })
        } else {
          // 异步执行then函数注册的回调
          setTimeout(() => {
            if (_this.thenCallback) {
              _this.thenCallback(value)
            }
          })
        }
        }
       
      }
      var reject = function (errValue) {
        if (_this.PromiseState === 'pending') {
          _this.PromiseState = 'rejected';
          _this.PromiseResult = errValue;
        }
      }
      if (fn) {
        fn(resolve, reject)
      }
    }

    MyPromise.prototype.then = function (callback) {
      // 返回一个promise，可以再次执行then函数
      return new MyPromise((resolve, reject) => {
        this.thenCallback = (value) => {
          var lastcallback = callback(value)
          resolve(lastcallback)
        }
      })
    }
    MyPromise.resolve=(res)=>{
     return  new MyPromise((resolve,reject)=>{
      resolve(res)
     })
    }
    MyPromise.reject=(res)=>{
     return  new MyPromise((resolve,reject)=>{
      reject(res)
     })
    }
    console.log('start');
    const myP = new MyPromise((resolve) => {
      resolve(MyPromise.resolve('我是第一个promise的值'))
      // resolve('my promise')
    })
    const p1 = myP.then((res) => {
      console.log(33, res);
      return new MyPromise((resolve)=>{
        setTimeout(()=>{
          resolve()
        },1000)
      })
    }).then((res) => {
      console.log('第二个then', res);
      return new MyPromise((resolve)=>{
        setTimeout(()=>{
          resolve()
        },1000)
      })
    })
      .then((res) => {
        console.log('第3个then', res);
      })
    console.log('end', p1);
  </script>
</body>

</html>