手写一个简单的promise

777 阅读1分钟

手写一个promise

promise主要解决的是 回调地狱 问题,学习promise的时候,可以对比着回调函数,例如某些http请求如果用promise实现是怎样的,如果用回调函数写又是怎样的。接下来是一个手写的简单的promise,让我们一起揭开promise的本来面目!!

  const PENDING = Symbol('pending')
  const FULFILLED = Symbol('resolved')
  const REJECTED = Symbol('reject')
  function MyPromise(fn){
      if(typeof fn!=='function'){
          throw new Error('fn must be a function')
      }
      let state = PENDING
      let value = null
      let handler = {}
      function resolve(result){
          try{
              state=FULFILLED
              value=result
              handler.onFulfill(value)
          }catch(err){
              reject(err)
          }
      }
      function reject(error){
          state=REJECTED;
          value=error;
      }
      this.then=(onFulfill,onReject)=>{
          switch(state){
              case FULFILLED:onFulfill(value) 
                  break
              case REJECTED:onReject(value)
                  break
              case PENDING:handler = { onFulfill,onReject }
          }
      }
      fn(resolve,reject)
  }
  let p=new MyPromise((resolve,reject)=>{
      setTimeout(()=>{
          console.log(3,' setTimeout ')
          resolve('hello promise')
      },3000)
  })
  console.log(1,p)
  p.then((val)=>{
      console.log(4,val)
  })
  console.log(2,'哈哈')

运行结果

运行结果

相关案例

之前看过一个面试题: 实现一个sleep函数: 执行 sleep(3000).then(()=>{ console.log('....') }) 满足3s后执行console.log

很像promise,草草的写了个实现方式,希望各位指正或者有更好的实现方式提出

let sleep=function(ms){
    let resolve=function(){
        console.log('呵呵呵')
    };
    let fn = function(){
        setTimeout(()=>{
            resolve()
        },ms)
        return fn
    } 
    Function.prototype.then=function(fun){
        resolve=fun;
    }
    return fn();
}
sleep(3000).then(()=>{console.log('哈哈哈')})