假如面试官要你手写一个promise

promise

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

步骤一

• Promise特点
  • 1，创建时需要传递一个函数，否则会报错
  • 2，会给传入的函数设置两个回调函数
  • 3，刚创建的Promise对象状态是pending

class MyPromise {constructor(handle) {// 3，刚创建的Promise对象状态是pendingthis.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对象状态是pendingthis.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] = valuecount++;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);});}})
}