js的异步编程-手写promise

serendipity_tang
103 阅读5分钟

# 手把手一行一行代码教你“手写Promise“，完美通过 Promises/A+ 官方872个测试用例

同步模式和异步模式

js是单线程的，但是浏览器不是单线程的

回调函数

所有异步编程方案的根基 由调用者定义，交给执行者执行的函数

Promise

commonJs提出 Promise对象的then方法会返回一个全新的Promise对象
后面的then方法就是在为上一个then返回的Promise注册回调
前面的then方法中回调函数的返回值会作为后面then里面回调函数的参数
如果回调中返回的是Promise，那后面then方法的回调会等待它的结束，相当于为这个返回的Promise对象注册了回调

手写promise的思路

  1. 当我使用Promise的时候，需要new Promise(),我们由此可以推测Promise就是一个类，在执行一个类的时候我们需要传递一个回调函数（我们称之为执行器），这个回调函数会立即执行。
class MyPromise {
  constructor(executor) {
    executor(this.reslove, this.reject);  // 回调函数立即执行
  }
}
  1. promise有三种状态 pending->fulfilled pending->rejected
// 定义三种状态常亮，以便复用
const PENDING = 'pending' //等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' //失败

class MyPromise {
  constructor(executor) {
    executor(this.reslove, this.reject);
  }
  status = PENDING
  reslove = () => {
      if(this.status ===PENDING ){   //如果状态不是等待，组织程序向下执行
        this.status = FULFILLED
      }
    
  };
  reject = () => {
    if(this.status !==PENDING ) return //如果状态不是等待，组织程序向下执行
    this.status = REJECTED
    
  };
}
  1. reslove和reject是用来更改状态的（代码如上）
  2. then 方法内部做的事情就是判断上一个promise执行后的状态，成功则调用成功的cb，失败则调用失败的cb，then方法是被定义在原型对象上的
const PENDING = 'pending' //等待
const FULFILLED = 'fulfilled' // 成功
const REJECTED = 'rejected' //失败

class MyPromise {
  constructor(executor) {
    executor(this.reslove, this.reject);
  }
  status = PENDING
  reslove = () => {
      if(this.status ===PENDING ){   //如果状态不是等待，组织程序向下执行
        this.status = FULFILLED
      }
    
  };
  reject = () => {
    if(this.status !==PENDING ) return
    this.status = REJECTED
    
  };

  then(successCallback,failCallback){
      if(this.status = FULFILLED){
        successCallback()
      }else if (this.status = REJECTED){
        failCallback()
      }
  }
}

5.then成功回调有一个参数，表示成功之后的值，失败之后有一个参数，表示失败的原因

class MyPromise {
  constructor(executor) {
    executor(this.reslove, this.reject);
  }
  // promise 状态
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败之后的原因
  reason = undefined;
  reslove = (value) => {
    //如果状态不是等待，组织程序向下执行
    if (this.status === PENDING) {
      this.status = FULFILLED; // 更改状态
      // 保存成功之后的值
      this.value = value; // promise中更改状态的时候使用resolve('成功')来传值
    }
  };
  reject = (reason) => {
    if (this.status !== PENDING) return;
    this.status = REJECTED; // 更改状态
    // 保存失败后的原因
    this.reason = reason; // promise中更改状态的时候使用resolve('成功')来传值
  };

  then(successCallback, failCallback) {
    if ((this.status === FULFILLED)) {
      successCallback(this.value);
    } else if ((this.status === REJECTED)) {
      failCallback(this.reason);
    }
  }
}

到这里简单的promise就实现了
6. 同一个promise对象下面的then方法是可以被调用多次的
7. then方法是可以被链式调用的, 后面then方法的回调函数拿到值的是上一个then方法的回调函数的返回值(return 出来的值)


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

class MyPromise {
  constructor(executor) {
    try {
      executor(this.reslove, this.reject);
    } catch (error) {
      this.reject(error);
    }
  }
  // promise 状态
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败之后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  reslove = (value) => {
    //如果状态不是等待，组织程序向下执行
    if (this.status !== PENDING) return;
    this.status = FULFILLED; // 更改状态
    // 保存成功之后的值
    this.value = value; // promise中更改状态的时候使用resolve('成功')来传值
    // 判断成功回调是否存在，存在就调用
    // 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; // promise中更改状态的时候使用resolve('成功')来传值
    // 判断失败回调是否存在，存在就调用
    // this.failCallback && this.failCallback(this.reason);
    while (this.failCallback.length) {
      this.failCallback.shift()();
    }
  };

  then(successCallback, failCallback) {
    successCallback = successCallback ? successCallback : (value) => value;
    failCallback = failCallback
      ? failCallback
      : (reason) => {
          throw reason;
        };

    let promise2 = new MyPromise((reslove, reject) => {
      // than链式调用处理
      if (this.status === FULFILLED) {
        setTimeout(() => {
          //为了同步代码执行完，才能获取promise2
          try {
            // 处理执行函数抛错
            let x = successCallback(this.value);
            // 判断x的值是普通值还是promise对象，如果是普通值直接调用resolve
            // 如果是promise对象，查看promise对象的返回结果，根据结果决定调用resolve还是reject
            reslovePromise(promise2, x, reslove, reject);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          //为了同步代码执行完，才能获取promise2
          try {
            // 处理执行函数抛错
            let x = failCallback(this.reason);
            // 判断x的值是普通值还是promise对象，如果是普通值直接调用resolve
            // 如果是promise对象，查看promise对象的返回结果，根据结果决定调用resolve还是reject
            reslovePromise(promise2, x, reslove, reject);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        // 等待状态
        // 讲成功回调和失败回调存储起来nvm     处理异步代码执行reslove或者reject
        this.successCallback.push(() => {
          setTimeout(() => {
            //为了同步代码执行完，才能获取promise2
            try {
              // 处理执行函数抛错
              let x = successCallback(this.value);
              // 判断x的值是普通值还是promise对象，如果是普通值直接调用resolve
              // 如果是promise对象，查看promise对象的返回结果，根据结果决定调用resolve还是reject
              reslovePromise(promise2, x, reslove, reject);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            //为了同步代码执行完，才能获取promise2
            try {
              // 处理执行函数抛错
              let x = failCallback(this.reason);
              // 判断x的值是普通值还是promise对象，如果是普通值直接调用resolve
              // 如果是promise对象，查看promise对象的返回结果，根据结果决定调用resolve还是reject
              reslovePromise(promise2, x, reslove, reject);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });

    return promise2;
  }
  finally(cb) {
    return this.then(
      (value) => {
        // cb();
        // return value
        return MyPromise.reslove(cb()).then(()=>{return value})
      },
      (reason) => {
        return MyPromise.reslove(cb()).then(()=>{throw reason})
        // cb();
      }
    );
  }
  static all(array) {
    let result = [];
    let index = 0;

    return new MyPromise((resolve, reject) => {
      function addData(key, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(
            (value) => {
              addData(i, value);
            },
            (reason) => reject(reason)
          );
        } else {
          // 普通值
          addData(i, array[i]);
        }
      }
    });
  }
  static reslove(value) {
    // 把给定的值转化为promise对象
    if (value instanceof MyPromise) {
      return value;
    } else {
      return new Promise((reslove) => {
        reslove(value);
      });
    }
  }
  catch(failCallback) {
    return this.then(undefined, failCallback);
  }
}
function reslovePromise(promise2, x, reslove, reject) {
  if (promise2 === x) {
    return reject(new TypeError("chaining cycle"));
  }
  if (x instanceof MyPromise) {
    //x 是不是MyPromise 实例
    // promise对象
    // x.then(value=>reslove(value),reason=>reject(reason))
    x.then(reslove, reject);
  } else {
    reslove(x);
  }
}

module.exports = MyPromise; // commonJs的模块规范导出
avatar
文章
阅读
粉丝