Js深度剖析~手写Promise源码@21/12/30

  • A+
所属分类:体育平台

Js深度剖析~手写Promise源码@21/12/30

Promise类核心逻辑的实现

/**
 * 1. Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行
 * 2. Promise 中有三种状态 分别为 成功 fulfilled 失败 rejected 等待 pending
 *    pending -> fulilled
 *    pending -> rejected
 *    一旦状态确定就不可更改
 * 3. resolve 和 reject 函数是用来 更改状态的
 *    resolve: fulilled
 *    reject: rejected
 * 4. then 方法内部做的事情就是判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用失败的回调函数 
 * 5. then 成功回调有一个参数 表示成功后的值  失败有一个参数 表示失败原因
 */

const MyPromise = require('./myPromise');

let promise = new MyPromise((resolve, reject) => {
  // resolve('成功')
  reject('失败')
})

promise.then(value =>{
  console.log(value)
}, reason =>{
  console.log(reason)
})
// MyPromise 类
const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {

  constructor (executor) {
    executor(this.resolve, this.reject)
  }

  // promise 状态
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value

  }

  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为失败
    this.status = REJECTED;
    // 保存失败之后的值
    this.reason = reason
  }

  then (successCallback, failCallback) {
    // 判断状态
    if(this.status === FULFILLED) {
      successCallback(this.value)
    } else if(this.status === REJECTED) {
      failCallback(this.reason)
    }
  }


}

module.exports = MyPromise;

加入异步代码实现异步逻辑

/**
 * 1. Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行
 * 2. Promise 中有三种状态 分别为 成功 fulfilled 失败 rejected 等待 pending
 *    pending -> fulilled
 *    pending -> rejected
 *    一旦状态确定就不可更改
 * 3. resolve 和 reject 函数是用来 更改状态的
 *    resolve: fulilled
 *    reject: rejected
 * 4. then 方法内部做的事情就是判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用失败的回调函数 
 * 5. then 成功回调有一个参数 表示成功后的值  失败有一个参数 表示失败原因
 */

const MyPromise = require('./myPromise');

let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功')
  }, 2000)
  // reject('失败')
})

promise.then(value =>{
  console.log(value)
}, reason =>{
  console.log(reason)
})
// MyPromise 类
const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {

  constructor (executor) {
    executor(this.resolve, this.reject)
  }

  // promise 状态
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = undefined;
  // 失败回调
  failCallback = undefined;

  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果 存在 调用
    this.successCallback && this.successCallback(this.value)
  }

  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为失败
    this.status = REJECTED;
    // 保存失败之后的值
    this.reason = reason
    // 判断失败回调是否存在 如果 存在 调用
    this.failCallback && this.failCallback(this.reason)

  }

  then (successCallback, failCallback) {
    // 判断状态
    if(this.status === FULFILLED) {
      successCallback(this.value)
    } else if(this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      // 等待
      // 将成功回调和失败回调 存储起来
      this.successCallback = successCallback;
      this.failCallback = failCallback;
    }
  }


}

module.exports = MyPromise;

实现then 方法多次调用

/**
 * 1. Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行
 * 2. Promise 中有三种状态 分别为 成功 fulfilled 失败 rejected 等待 pending
 *    pending -> fulilled
 *    pending -> rejected
 *    一旦状态确定就不可更改
 * 3. resolve 和 reject 函数是用来 更改状态的
 *    resolve: fulilled
 *    reject: rejected
 * 4. then 方法内部做的事情就是判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用失败的回调函数 
 * 5. then 成功回调有一个参数 表示成功后的值  失败有一个参数 表示失败原因
 */

const MyPromise = require('./myPromise');

let promise = new MyPromise((resolve, reject) => {
  // resolve('成功')
  setTimeout(() => {
    resolve('成功')
  }, 2000)
  // reject('失败')
})

// promise.then(value =>{
//   console.log(value)
// }, reason =>{
//   console.log(reason)
// })

promise.then(value =>{
  console.log(value)
}, reason =>{
    console.log(reason)
});

promise.then(value =>{
  console.log(value)
}, reason =>{
  console.log(reason)
});

promise.then(value =>{
  console.log(value)
}, reason =>{
  console.log(reason)
});
// MyPromise 类
const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {

  constructor (executor) {
    executor(this.resolve, this.reject)
  }

  // promise 状态
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];

  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果 存在 调用
    // this.successCallback && this.successCallback(this.value)
    while (this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为失败
    this.status = REJECTED;
    // 保存失败之后的值
    this.reason = reason
    // 判断失败回调是否存在 如果 存在 调用
    // this.failCallback && this.failCallback(this.reason)
    while (this.failCallback.length) this.failCallback.shift()(this.reason)

  }

  then (successCallback, failCallback) {
    // 判断状态
    if(this.status === FULFILLED) {
      successCallback(this.value)
    } else if(this.status === REJECTED) {
      failCallback(this.reason)
    } else {
      // 等待
      // 将成功回调和失败回调 存储起来
      this.successCallback.push(successCallback);
      this.failCallback.push(failCallback);
    }
  }


}

module.exports = MyPromise;

实现then方法的链式调用

/**
 * 1. Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行
 * 2. Promise 中有三种状态 分别为 成功 fulfilled 失败 rejected 等待 pending
 *    pending -> fulilled
 *    pending -> rejected
 *    一旦状态确定就不可更改
 * 3. resolve 和 reject 函数是用来 更改状态的
 *    resolve: fulilled
 *    reject: rejected
 * 4. then 方法内部做的事情就是判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用失败的回调函数 
 * 5. then 成功回调有一个参数 表示成功后的值  失败有一个参数 表示失败原因
 */

const MyPromise = require('./myPromise');

let promise = new MyPromise((resolve, reject) => {
  resolve('成功')
  // setTimeout(() => {
  //   resolve('成功')
  // }, 2000)
  // reject('失败')
})

function other () {
  return new MyPromise((resolve, reject)=>{
    resolve('other')
  })
}

promise.then(value =>{
  console.log(value)
  return other();
}).then(value => {
  console.log(value)
})
// MyPromise 类
const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {

  constructor (executor) {
    executor(this.resolve, this.reject)
  }

  // promise 状态
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];

  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果 存在 调用
    // this.successCallback && this.successCallback(this.value)
    while (this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为失败
    this.status = REJECTED;
    // 保存失败之后的值
    this.reason = reason
    // 判断失败回调是否存在 如果 存在 调用
    // this.failCallback && this.failCallback(this.reason)
    while (this.failCallback.length) this.failCallback.shift()(this.reason)

  }

  then (successCallback, failCallback) {

    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if(this.status === FULFILLED) {
        let x = successCallback(this.value)
        // 判断x 的值是普通值 还是 promise 对象
        // 如果是普通值 直接调用 resolve
        // 如果是 promise 对象 查看promise 对象返回的结果
        // 在根据promise 对象返回结果 决定调用 resolve 还是 调用 reject
        resolvePromise(x, resolve, reject)
      } else if(this.status === REJECTED) {
        failCallback(this.reason)
      } else {
        // 等待
        // 将成功回调和失败回调 存储起来
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }


    });


    return promise2;


  }


}

function resolvePromise(x, resolve, reject) {
  if(x instanceof MyPromise){
    // promise 对象
    // x.then(value=>resolve(value), reason=>reject(reason))
    x.then(resolve, reject)
  } else {
    // 普通值
    resolve(x)
  }

}

module.exports = MyPromise;

then 方法链式调用识别 Promise 对象自返回

/**
 * 1. Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行
 * 2. Promise 中有三种状态 分别为 成功 fulfilled 失败 rejected 等待 pending
 *    pending -> fulilled
 *    pending -> rejected
 *    一旦状态确定就不可更改
 * 3. resolve 和 reject 函数是用来 更改状态的
 *    resolve: fulilled
 *    reject: rejected
 * 4. then 方法内部做的事情就是判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用失败的回调函数 
 * 5. then 成功回调有一个参数 表示成功后的值  失败有一个参数 表示失败原因
 */

const MyPromise = require('./myPromise');

let promise = new MyPromise((resolve, reject) => {
  resolve('成功')
  // setTimeout(() => {
  //   resolve('成功')
  // }, 2000)
  // reject('失败')
})

function other () {
  return new MyPromise((resolve, reject)=>{
    resolve('other')
  })
}

let p1 = promise.then(value =>{
  console.log(value)
  return p1;
})

p1.then(value => {
  console.log(value)
}, reason => {
  console.log(reason.message)
})

const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {

  constructor (executor) {
    executor(this.resolve, this.reject)
  }

  // promise 状态
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];

  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果 存在 调用
    // this.successCallback && this.successCallback(this.value)
    while (this.successCallback.length) this.successCallback.shift()(this.value)
  }

  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为失败
    this.status = REJECTED;
    // 保存失败之后的值
    this.reason = reason
    // 判断失败回调是否存在 如果 存在 调用
    // this.failCallback && this.failCallback(this.reason)
    while (this.failCallback.length) this.failCallback.shift()(this.reason)

  }

  then (successCallback, failCallback) {

    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if(this.status === FULFILLED) {
        setTimeout(()=>{
          let x = successCallback(this.value)
          // 判断x 的值是普通值 还是 promise 对象
          // 如果是普通值 直接调用 resolve
          // 如果是 promise 对象 查看promise 对象返回的结果
          // 在根据promise 对象返回结果 决定调用 resolve 还是 调用 reject
          resolvePromise(promise2, x, resolve, reject)
        }, 0)
      } else if(this.status === REJECTED) {
        failCallback(this.reason)
      } else {
        // 等待
        // 将成功回调和失败回调 存储起来
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }


    });


    return promise2;


  }


}

function resolvePromise(promise2, x, resolve, reject) {
  if(promise2 === x) {
    return reject(new TypeError('循环调用错误!'))
  }
  if(x instanceof MyPromise){
    // promise 对象
    // x.then(value=>resolve(value), reason=>reject(reason))
    x.then(resolve, reject)
  } else {
    // 普通值
    resolve(x)
  }

}

module.exports = MyPromise;

捕获错误及 then 链式调用其他状态代码补充


const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {

  constructor (executor) {
    try {
      executor(this.resolve, this.reject)
    } catch (error) {
      this.reject(error)
    }
    
  }

  // promise 状态
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];

  resolve = value => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value
    // 判断成功回调是否存在 如果 存在 调用
    // this.successCallback && this.successCallback(this.value)
    while (this.successCallback.length) this.successCallback.shift()()
  }

  reject = reason => {
    // 如果状态不是等待 阻止程序向下执行
    if(this.status !== PENDING) return ;
    // 将状态改为失败
    this.status = REJECTED;
    // 保存失败之后的值
    this.reason = reason
    // 判断失败回调是否存在 如果 存在 调用
    // this.failCallback && this.failCallback(this.reason)
    while (this.failCallback.length) this.failCallback.shift()()

  }

  then (successCallback, failCallback) {

    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if(this.status === FULFILLED) {
        setTimeout(()=>{
          try {
            let x = successCallback(this.value)
            // 判断x 的值是普通值 还是 promise 对象
            // 如果是普通值 直接调用 resolve
            // 如果是 promise 对象 查看promise 对象返回的结果
            // 在根据promise 对象返回结果 决定调用 resolve 还是 调用 reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      } else if(this.status === REJECTED) {
        setTimeout(()=>{
          try {
            let x = failCallback(this.reason)
            // 判断x 的值是普通值 还是 promise 对象
            // 如果是普通值 直接调用 resolve
            // 如果是 promise 对象 查看promise 对象返回的结果
            // 在根据promise 对象返回结果 决定调用 resolve 还是 调用 reject
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)

      } else {
        // 等待
        // 将成功回调和失败回调 存储起来
        this.successCallback.push(() => {
          
          setTimeout(()=>{
            try {
              let x = successCallback(this.value)
              // 判断x 的值是普通值 还是 promise 对象
              // 如果是普通值 直接调用 resolve
              // 如果是 promise 对象 查看promise 对象返回的结果
              // 在根据promise 对象返回结果 决定调用 resolve 还是 调用 reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              reject(error)
            }
          }, 0)

        });
        this.failCallback.push(() => {
          setTimeout(()=>{
            try {
              let x = failCallback(this.reason)
              // 判断x 的值是普通值 还是 promise 对象
              // 如果是普通值 直接调用 resolve
              // 如果是 promise 对象 查看promise 对象返回的结果
              // 在根据promise 对象返回结果 决定调用 resolve 还是 调用 reject
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              reject(error)
            }
          }, 0)
        });
      }


    });


    return promise2;


  }


}

function resolvePromise(promise2, x, resolve, reject) {
  if(promise2 === x) {
    return reject(new TypeError('循环调用错误!'))
  }
  if(x instanceof MyPromise){
    // promise 对象
    // x.then(value=>resolve(value), reason=>reject(reason))
    x.then(resolve, reject)
  } else {
    // 普通值
    resolve(x)
  }

}

module.exports = MyPromise;

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: