码迷,mamicode.com
首页 > 其他好文 > 详细

基于PromiseA+规范实现一个promise

时间:2020-07-06 22:43:09      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:erro   The   res   回调函数   handle   pen   null   有一个   执行   

实现如果下规范的promise
Aplus规范
1,promise是一个类:有三个状态 pending/等待态 fulfilled/成功态 rejected/失败态
2,promise默认执行器立即执行
3,Promise的实例都有一个then方法
4,执行器中用户可以自己决定成功或者失败,并且传入成功或者失败的原因
5,如果excutor执行器函数发生异常的时候也会执行失败的逻辑
6,如果Promise一旦进入成功态就不能再变为失败态,反之亦然
 
// 定义promise三种状态
let PENDING = ‘PENDING‘
let RESOLVED = ‘RESOLVED‘ // 成功状态
let REJECTED = ‘REJECTED‘  // 失败状态
console.log(‘own‘)

const resolvePromise = (promise2, x, resolve, reject) => {
  // A+规范中  x和promise2引用同一个对象抛出类型错误
  if (promise2 === x) {
    return reject(new TypeError(‘Chaining cycle detected for promise #<Promise>‘))
  }
  // 后续的条件要严格判断   保证代码能和别的库一起使用 
  // x可能是一个函数或者对象
  if ((typeof x === ‘object‘ && x !== null) || typeof x === ‘function‘) {
    try {
      let then = x.then;
      if (typeof then === ‘function‘) {
        // 只能判断then是函数就认为其是promise
        then.call(x, y => {
          resolve(y)
        }, e => {
          reject(e)
        })
      } else {
        resolve(x)
      }
    } catch (e) {
      //TODO handle the exception
    }

  } else {
    resolve(x)
  }
}

class Promise {
  constructor(excutor) {
    this.status = PENDING
    // 成功和失败的原因需要保存
    this.value = undefined; // 成功的值
    this.reason = undefined; // 失败的值
    this.onResolvedCallbacks = [];  // 存储成功的回调函数数组
    this.onRejectedCallbacks = [];  // 存储失败的回调函数数组
    // 只有等待态的时候才能更改状态


    let resolve = (value) => {

      if(value instanceof Promise){
        value.then(resolve,reject)  // 判断是promise.resolve 中如果传promise 递归解析 ,有延迟效果
      }

      if (this.status = PENDING) {
        this.value = value;
        this.status = RESOLVED;
        this.onResolvedCallbacks.forEach(fn => fn())
      }

    }
    let reject = (reason) => {
      if (this.status = PENDING) {
        this.reason = reason;
        this.status = REJECTED;
        this.onRejectedCallbacks.forEach(fn => fn())
      }
    }
    // 当函数发生异常直接抛出错误
    try {
      excutor(resolve, reject)
    } catch (e) {
      reject(e)
    }
  }
  // 关于then方法: 
  // 1: promise 成功或者失败会传递到外层的下一个then方法
  // 2: 返回的是普通值(除了promise之外的值)都会触底到下一then的成功中;出错的情况走到下一次的失败中;
  // 3: 错误处理 。自己最近的then没有错误处理,会向下传递错误直到有错误处理
  // 4: 每次执行完then 返回都是新的promise (一旦成功或者失败就不能够修改状态)
  then (onFulfilled, onRejected) {

    // 如果then中返回一个promise 我需要用x来决定是决定promise返回成功还是失败

    let promise2 = new Promise((resolve, reject) => {  // 链式调用
      if (this.status === RESOLVED) {
        setTimeout(() => { // 为了让resolvePromise拿到promise2
          try {
            // 如果状态是成功了,需要调用传入的第一个onFulfilled函数
            let x = onFulfilled(this.value)  //成功的回调直接执行;执行完成后拿到结果;ps: 成功之后返回的直接执行拿到结果存放到x中 
            // 但是返回的promise 还能继续then,继续传递成功的结果
            // x可能是promise,解析promise ,使用这个返回的结果决定下一个then是成功还是失败
            resolvePromise(promise2, x, resolve, reject) // 调用了下一个promise的resolve  
          } catch (error) {
            reject(error)
          }

        }, 0)
      }
      if (this.status === REJECTED) {
        setTimeout(() => { // 为了让resolvePromise拿到promise2
          try {
            // 如果状态失败了,就需要使用第二个函数讲失败的原因返回
            let x = onRejected(this.reason)
            // 处理失败
            resolvePromise(promise2, x, resolve, reject) //普通值都会传递到下一个的成功
          } catch (error) {
            reject(error)
          }

        }, 0)
      }
      // 调用then的时候可能是pending状态
      if (this.status === PENDING) {
        this.onResolvedCallbacks.push(() => {
          // todo
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              reject(error)
            }
          }, 0)

        })
        this.onRejectedCallbacks.push(() => {
          // todo
          setTimeout(() => {
            try {
              let x = onRejected(this.reason)
              resolvePromise(promise2, x, resolve, reject);
            } catch (error) {
              reject(error)
            }
          }, 0)
        })
      }
    })
    return promise2;
  }
  catch(errCallBack){
    return this.then(null,errCallBack)
  }
  static resolve(data){
    // 快速创建一个成功的promise
    return new Promise((resolve,reject) => {
      resolve(data)
    })
  }
  static reject(reason){
    // 快速创建一个失败的promise
    return new Promise((resolve,reject) => {
      reject(reason)
    })
  }
}

 

基于PromiseA+规范实现一个promise

标签:erro   The   res   回调函数   handle   pen   null   有一个   执行   

原文地址:https://www.cnblogs.com/qqfontofweb/p/13258064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!