手写promise

jie19100
7,069 阅读5分钟

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

promise

在开发中，经常需要用到promise，promise具有很多特性，这一次将对promise特性进行总结，并从零写一个promise。

步骤一

  • Promise特点
    • 1，创建时需要传递一个函数，否则会报错
    • 2，会给传入的函数设置两个回调函数
    • 3，刚创建的Promise对象状态是pending
class MyPromise {
  constructor(handle) {
    // 3，刚创建的Promise对象状态是pending
    this.status = "pending";
    // 1，创建时需要传递一个函数，否则会报错
    if (!this._isFunction(handle)) {
      throw new Error("请传入一个函数");
    }
    // 2，会给传入的函数设置两个回调函数
    handle(this._resolve.bind(this), this._reject.bind(this))
  }
  _resolve() {

  }
  _reject() {

  }
  _isFunction(fn) {
    return typeof fn === "function";
  }
}

步骤二

  • Promise特点
    • 4，状态一旦发生改变就不可再次改变
    • 5，可以通过then来监听状态的改变
      • 5.1，如果创建监听时，状态已经改变，立即执行监听回调
      • 5.2，如果创建监听时，状态未改变，会等状态改变后执行
      • 5.3，同一promise对象可以添加多个then监听，状态改变时按照注册顺序依次执行
// 定义常量保存对象的状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
  constructor(handle) {
    // 3，刚创建的Promise对象状态是pending
    this.status = PENDING;
    // 成功回调的值
    this.value = undefined;
    // 失败回调的值
    this.reason = undefined;
    // 注册的成功回调
    this.onResolvedCallbacks = [];
    // 注册的失败回调
    this.onRejectedCallbacks = [];
    // 1，创建时需要传递一个函数，否则会报错
    if (!this._isFunction(handle)) {
      throw new Error("请传入一个函数");
    }
    // 2，会给传入的函数设置两个回调函数
    handle(this._resolve.bind(this), this._reject.bind(this))
  }
  _resolve(value) {
    // 4，状态一旦发生改变就不可再次改变
    if (this.status === PENDING) {
      this.status = FULFILLED;
      this.value = value;
      // 5.3，同一promise对象可以添加多个then监听，状态改变时按照注册顺序依次执行
      this.onResolvedCallbacks.forEach(fn => fn(this.value));
    }
  }
  _reject(reason) {
    // 4，状态一旦发生改变就不可再次改变
    if (this.status === PENDING) {
      this.status = REJECTED;
      this.reason = reason;
      // 5.3，同一promise对象可以添加多个then监听，状态改变时按照注册顺序依次执行
      this.onRejectedCallbacks.forEach(fn => fn(this.reason));
    }
  }
  then(onResolved, onRejected) {
    // 判断有没有传入成功的回调
    if (this._isFunction(onResolved)) {
      // 5.1，如果创建监听时，状态已经改变，立即执行监听回调
      if (this.status === FULFILLED) {
        onResolved(this.value);
      }
    }
    // 判断有没有传入失败的回调
    if (this._isFunction(onRejected)) {
      // 5.1，如果创建监听时，状态已经改变，立即执行监听回调
      if (this.status === REJECTED) {
        onRejected(this.reason);
      }
    }
    // 5.2，如果创建监听时，状态未改变，会等状态改变后执行
    if (this.status === PENDING) {
      if (this._isFunction(onResolved)) {
        this.onResolvedCallbacks.push(onResolved);
      }
      if (this._isFunction(onRejected)) {
        this.onRejectedCallbacks.push(onRejected);
      }
    }
  }
  _isFunction(fn) {
    return typeof fn === "function";
  }
}

详解then方法

  • 接收两个参数：成功回调，失败回调
  • 如果promise失败了，但是没有注册失败监听，就会报错
  • then方法每次执行完毕都会返回一个新的Promise对象
    • 如果then方法只有成功回调
      • 则它返回的promise的状态会继承当前promise的状态。
      • 如果当前promise的状态为成功：新promise的值为当前then的成功回调的返回值。
      • 如果当前promise的状态为失败：新的promise没有失败监听，则会报错
    • 如果then方法同时包含成功回调、失败回调
    • 则它返回的promise的状态都为成功，且值为成功或者失败回调的返回值。
  • 回调函数的返回值
    • 如果then方法的成功/失败回调返回的是promise对象
      • 则then方法返回的新的promise对象的状态由新promise的内部决定。
      • 且值为新promise的内resolve/reject函数传递的参数。
    • 如果then方法的成功/失败回调返回的是普通数据类型
      • 则then方法返回的新的promise对象的状态都为成功。
      • 且值为成功/失败回调的返回值，即都会传递给新的promise对象成功的回调。
    • 如果then方法的成功/失败回调没有返回值
      • 同返回普通数据类型
  • 失败回调函数
    • 可以捕获上一个promise对象的then方法中成功回调函数执行时的异常
then(onResolved, onRejected) {
    return new MyPromise((nextResolve, nextReject) => {
      // 1.判断有没有传入成功的回调
      if (this._isFunction(onResolved)) {
        // 2.判断当前的状态是否是成功状态
        if (this.status === FULFILLED) {
          try {
            // 拿到上一个promise成功回调执行的结果
            let result = onResolved(this.value);
            // console.log("result", result);
            // 判断执行的结果是否是一个promise对象
            if (result instanceof MyPromise) {
              result.then(nextResolve, nextReject);
            } else {
              // 将上一个promise成功回调执行的结果传递给下一个promise成功的回调
              nextResolve(result);
            }
          } catch (e) {
            nextReject(e);
          }
        }
      }
      // 1.判断有没有传入失败的回调
      // if(this._isFunction(onRejected)){
      try {
        // 2.判断当前的状态是否是失败状态
        if (this.status === REJECTED) {
          let result = onRejected(this.reason);
          if (result instanceof MyPromise) {
            result.then(nextResolve, nextReject);
          } else {
            nextResolve(result);
          }
        }
      } catch (e) {
        nextReject(e);
      }
      // }
      // 2.判断当前的状态是否是默认状态
      if (this.status === PENDING) {
        if (this._isFunction(onResolved)) {
          // this.onResolvedCallback = onResolved;
          this.onResolvedCallbacks.push(() => {
            try {
              let result = onResolved(this.value);
              if (result instanceof MyPromise) {
                result.then(nextResolve, nextReject);
              } else {
                nextResolve(result);
              }
            } catch (e) {
              nextReject(e);
            }
          });
        }
        // if(this._isFunction(onRejected)){
        // this.onRejectedCallback = onRejected;
        this.onRejectedCallbacks.push(() => {
          try {
            let result = onRejected(this.reason);
            if (result instanceof MyPromise) {
              result.then(nextResolve, nextReject);
            } else {
              nextResolve(result);
              nextReject();
            }
          } catch (e) {
            nextReject(e);
          }
        });
        // }
      }
    });
}

详解catch方法

  • 其实是then方法的失败回调函数的语法糖
  • 如果需要同时使用then和catch方法，必须使用链式编程，不然会报错
  • 可以捕获上一个promise对象的then方法中成功回调函数执行时的异常
catch(onRejected) {
    return this.then(undefined, onRejected);
}

为啥使用catch时最好使用链式编程

  • 因为then方法只有成功回调，所以p2的状态会继承p1
  • 又因为p2的状态为失败，且没有对p2进行失败监听，所以报错
let p1 = new Promise(function (resolve, reject) {
  // resolve();
  reject();
});
let p2 = p1.then(function () {
  console.log("成功");
});
p1.catch(function () {
  console.log("失败1");
});

Promise.all()

  • Promise.all(params)特点
    • 参数为一个数组，且数组元素为promise类型数据
    • 返回值为一个promise，
      • 如果所有promise都执行成功
        • 返回值为所有promise都成功时返回的结果的集合
      • 如果有一个promise执行失败了，则返回失败的promise
static all(list){
    return new MyPromise(function (resolve, reject) {
        let arr = [];
        let count = 0;
        for(let i = 0; i < list.length; i++){
            let p = list[i];
            p.then(function (value) {
                // arr.push(value); 注意不要这样写，会导致结果顺序不对
                arr[i] = value
                count++;
                if(list.length === count){
                    resolve(arr);
                }
            }).catch(function (e) {
                reject(e);
            });
        }
    });
}

Promise.race()

  • Promise.race(params)特点
    • 参数为一个数组，且数组元素为promise类型数据
    • 返回值为一个promise，且返回值为第一个成功或者失败的promise的值
static race(list){
    return new MyPromise(function (resolve, reject) {
        for(let p of list){
            p.then(function (value) {
                resolve(value);
            }).catch(function (e) {
                reject(e);
            });
        }
    })
}

点赞收藏不迷路

avatar
文章
阅读
粉丝
相关推荐
前端实习面试准备-什么是BFC
29阅读
 · 
0点赞
浅谈浏览器渲染、回流和重绘
6.1k阅读
 · 
76点赞
14万字 | 400 多道 JavaScript 面试题 🎓 有答案 🌠(第二部分 101-200题)
5.1k阅读
 · 
112点赞
JS实现继承的6种方式
2.0k阅读
 · 
21点赞
Js的Generator函数（二）
451阅读
 · 
50点赞