关于前端:假如面试官要你手写一个promise

45次阅读

共计 4905 个字符，预计需要花费 13 分钟才能阅读完成。

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);
            });
        }
    })
}

正文完
前端
发表至： 前端
2023-03-01
 0
怎么让Highcharts的提示框tooltip自动轮播
关于前端:return-await-promise-与-return-promise-这细微的区别
关于前端:CSS-揭秘
关于前端:新指令-vmemo提高性能的又一利器