手写promise与async await

promise

先看看promise实现的效果

const Pro =  new Promise((resolve,reject) => {
    
  setTimeout(() => {
    
    resolve(123)
  }, 5000)
})
Pro.then((res) => {
     
  console.log(res,'----')
})
// 运行代码5秒后控制台打印 123 "----"

自己实现

const PromiseFater = function(callBack) {
    
  this.callBack = callBack
  this.then = (back) => {
    
    this.callBack(back)
  }
}

const p = new PromiseFater((resolve, reject) => {
    
  console.log(1)
  setTimeout(() => {
    
    resolve(123)
  }, 5000)
})
p.then((res) => {
    
  console.log(res, '---')
})
// 运行代码5秒后控制台打印 123 "---"

上面只是换了个方法阐述了promise的实现原理，下面我们加上reject

这代码并不支持连续的.then().then(),只是分析了一下.then().catch()如何实现的，不想把代码搞得太多了，这样不方便看

class  MyPromise {
    
  constructor (callBack) {
    
    if (typeof callBack !== 'function') {
    
      throw new Error('必须传入一个函数')
    }
     // 添加状态
     this.status = 'PENDING'
     this.thenFun = [] // 存放.then传入的back方法
     this.catchFun = [] // 存放.catch传入的back方法
     try {
    
      callBack(this.resolve, this.reject) 
    } catch (err) {
    
      this.reject(err)
    }
  }

  reject = (val) => {
    
    this.status = 'fail'
    this.catchFun(val)
  }
  resolve = (val) => {
    
    this.status = 'success'
    this.thenFun(val)
  }
  then = (back) => {
    
    if (typeof back !== 'function') {
    
      throw new Error('then参数必须传入一个函数')
    }
    this.thenFun = back
    return this
  }
  catch = (back) => {
    
    if (typeof back !== 'function') {
    
      throw new Error('catch参数必须传入一个函数')
    }
    this.catchFun = back
    return this
  }
}

const promise = new MyPromise((resolve, reject) => {
    
  setTimeout(() => {
    
    reject('失败测试')
  }, 2000);
})
promise
  .then((res) => {
    
    console.log(res)
  })
  .catch((res) => {
    
    console.log(res)
  })
// 运行，控制台上打印 失败测试


如果把
const promise = new MyPromise((resolve, reject) => {
    
  setTimeout(() => {
    
    reject('失败测试')
  }, 2000);
})
换成
const promise = new MyPromise((resolve, reject) => {
    
  setTimeout(() => {
    
    resolve('成功测试')
  }, 2000);
})
// 运行，控制台上打印 成功测试

如果想实现连续的.then().then()，可以将上面的thenFun 改成thenArr来保存每个then传入的方法，通过状态一次调用，但是何必呢，这样不说写着不好看，用async await他不香嘛