实现一个 Promise

最新推荐文章于 2024-09-25 09:53:04 发布

weixin_34175509

最新推荐文章于 2024-09-25 09:53:04 发布

阅读量81

点赞数

文章标签：前端 javascript 后端 ViewUI

原文链接：https://juejin.im/post/5ba49b3ee51d450e69735742

版权

对前端感兴趣的小伙伴，可以关注我的 Github

做为一名IT界比较少的物种 “程序媛”，经常会把 “感觉” 挂在嘴边，由于有过设计的背景，童鞋们都会觉得这只是一个女性化艺术化的词汇，emm...... 也有大佬把“感觉” 与 “经验” 划上等号，其实这是很片面的，在我看来“感觉” = “经验” + “创造”，而创造离不开知其然知其所以然，so....要对码代码这件事情有感觉，就要深入底层，多造轮子，慢慢的就爱上啦....

有兴趣可以查看官方实现

Promise 是什么

Promise 主要就是为了解决异步回调的问题。

用 Promise 来处理异步回调使得代码层次清晰，便于理解，且更加容易维护，符合开放封闭原则。

Promise 场景

先宏观感受一下 Promise 的使用

面试题：后端分两次返回数据，第一次返回 ID 数组，第二次根据第一次返回的 ID 去请求数据

const ids = [1, 2, 3, 4, 5]
const data = {
    1: 'data1',
    2: 'data2',
    3: 'data3',
    4: 'data4',
    5: 'data5',
}
resData = (data) => (
    new Promise((resolve, request) => {
        setTimeout(resolve, 1000, data, )
    })
)
resData(ids).then((ids) => {
    ids.forEach((id) => {
        resData(data).then(
            console.log(data[id])
        )
    })
}).catch(e => {
  console.log(e);
})
复制代码

最终我们写的promise同样可以实现这个功能

实现MyPromise

Promise 有三种状态：

Pending: 进行中
Resolved: 已成功
Rejected: 已失败

先定义三个标识状态的变量：

// 三种状态
const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected'; 
复制代码

我们需要两个私有变量：

标识Promise当前的状态：currentState
记录Promise的最终值：value

我们自己不能实现内部属性，JS中私有属性特性(#修饰符现在还是提案)暂时也没有支持，所以暂且用"_"前缀规定私有属性，这样就模拟了Promise 中的两个内部属性。

实现骨架

实现三个静态方法及一个原型方法

resolve
reject
catch
then

function MyPromise(fn) {
  let _this = this;
  _this.currentState = PENDING;
  _this.value = undefined;

  // 用于保存 then 中的回调，
  // 只有当 promise 状态为 pending 时，才会缓存，
  // 并且每个实例至多缓存一个
  _this.resolvedCallbacks = [];
  _this.rejectedCallbacks = [];


  _this.resolve = function (value) {
    // ...
  }

  _this.reject = function (reason) {
    // ...
  }

  try {
    fn(_this.resolve, _this.reject)
  } catch(e) {
    _this.reject(e)
  }
}


MyPromise.prototype.execute = function(executor) {
  // ...
}

MyPromise.prototype.then = function(onResolved, onRejected) {
  // ...
}
复制代码

实现 resolve 和 reject

可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。

   // 如果 value 是个Promise，递归执行
    if(value instanceof MyPromise) {
      return value.then(_this.resolve, _this.reject)
    }
    // 异步执行，保证执行顺序
    setTimeout(() => {
      if(_this.currentState === PENDING) {
        _this.currentState = RESOLVED
        _this.value = value
        _this.resolvedCallbacks.forEach(cb => cb())
      }
    })

  _this.reject = function (reason) {
    setTimeout(() => {
      if(_this.currentState === PENDING) {
        _this.currentState = REJECTED
        _this.value = reason
        _this.rejectedCallbacks.forEach(cb => cb())
      }
    })
  }复制代码

实现then

then 方法内部逻辑稍微复杂点，并且有一点一定一定一定要注意到: then 方法中的回调是异步执行的，思考下下段代码:

console.log(1);
new Promise((resolve,reject)=>{
    console.log(2);
    resolve();
})
.then(()=>console.log(3));
console.log(4);复制代码

执行结果是什么呢？答案其实是:1 2 4 3。传入 Promise 中的执行函数是立即执行完的啊，为什么不是立即执行 then 中的回调呢？因为 then 中的回调是异步执行，表示该回调是插入事件队列末尾，在当前的同步任务结束之后，下次事件循环开始时执行队列中的任务。

大体实现一下 then 的框架：

onResolved 和 onRejected 都是可选的参数，即如果类型不是 function ，需要忽略处理，同时也实现了透传。

当 Promise 的当前状态 Pending 时，缓存实例 (该返回值是一个新的实例而不是之前的实例。因为 Promise 规范规定除了 pending 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 then 调用就失去意义了）；否则异步执行传入的 onResolved 或者 onRejected

MyPromise.prototype.then = function(onResolved, onRejected) {
  var self = this
  // then 必须返回一个新的 promise
  var promise2
  // onResolved 和 onRejected 都为可选参数
  // 如果类型不是 function ，需要忽略，同时也实现了透传
  // Promise.resolve(4).then().then(value => console.log(value))
  onResolved = typeof onResolved === 'function' ? onResolved : v => v;
  onRejected = typeof onRejected === 'function' ? onRejected : r => throw r;

  if (self.currentState === RESOLVED) {
    return (promise2 = new MyPromise((resolve, reject) => {
      setTimeout(() => {
        // 异步执行onResolved
        try {
          var x = onResolved(self.value);
          // resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      })
    }))
  }
  if (self.currentState === REJECTED) {
    return (promise2 = new MyPromise((resolve, reject) => {
      setTimeout(() => {
        // 异步执行onRejected
        try {
          var x = onRejected(self.value);
          // resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      })
    }))
  }
  if (self.currentState === REJECTED) {
    return (promise2 = new MyPromise((resolve, reject) => {
        // 缓存实例到 resolvedCallbacks 或者 rejectedCallbacks
        self.resolvedCallbacks.push(function () {
        // 考虑到可能会有报错，所以使用 try/catch 包裹
        try {
          var x = onResolved(self.value);
          // resolutionProcedure(promise2, x, resolve, reject);
        } catch (r) {
          reject(r);
        }
      });

      self.rejectedCallbacks.push(function () {
        try {
          var x = onRejected(self.value);
          // resolutionProcedure(promise2, x, resolve, reject);
        } catch (r) {
          reject(r);
        }
      });
        
    }))
  }
}
复制代码