方法 手写promise_WEB前端面试必问的经典问题Promise的理解与总结

Promise作为面试中的经典考题，我们一定要深刻学习和理解它！ Promise有什么用呢？答：我们拿它解决异步回调问题。

概念

异步回调的一个很大的问题在于callback hell也就是“回调地狱”。多层嵌套回调函数，严重影响代码规范。Promise实际上是把回调函数从doSomething函数中提取到了后面的then()方法里，从而防止多重嵌套。一个Promise对象表示目前还不可用但是未来某个节点可以被解析的值，这个值要么被解析成功，要么失败抛出异常。它允许我们以同步的方式编写异步代码。

使用方法

Promise的构造函数用来构造一个Promise对象，其中入参匿名函数中resolve和reject这两个也都是函数。如果resolve执行了，则出发Promise.then中成功的回调函数，如果reject执行了，则触发了promise.then中拒绝的回调函数。

一个Promise对象一开始的值是pending准备状态，执行了resolve()后，Promise对象的状态值变为onFulfilled，执行了reject()后，状态值变为onRejected。Promise对象的状态值一旦确定，就不会再改变。

异常捕获

promise有两种异常捕获方式，一个是then中的reject，另一个是catch()方法。

then中的reject方法捕获异常

无法捕获当前then中抛出的异常

var promise = Promise.resolve();promise.then(()=>{    throw new Error("BOOM!");}).then((success)=>{    console.log(success);}, (error)=>{    console.log(error);});复制代码

catch捕获异常

catch不仅能捕获then中抛出的异常，还能捕获前面promise抛出的异常，所以建议使用catch方法。

var promise = Promise.reject("Boom!");promise.then(()=>{    return "success";}).then((success) => {    console.log(success);    throw new Error("Another Boom!");}).catch((error) => {    console.log(error); //BOOM!});复制代码

手写Promise

基础篇-小试牛刀

首先来看基础版的代码，可以实现简单的同步代码，这一步是必须要能够写出来的。

// 首先要明确Promise是一个类，所以我们用class声明。// 其次，构造函数中接收一个executor，它有两个参数，一个是resolve，一个是reject// 这里要注意，resolve和reject都是函数class Promise(){    // 构造函数(入参是执行器，包括resolve和reject两个函数)    constructor(executor){        // 必要的初始化，这里用到状态，值和原因三个变量        this.state = 'pending';        this.value = undefined;        this.reason = undefined;        // 定义成功函数，入参是value        let resolve = value => {            // 首先要判断state是否为等待态，如果不是则不做任何处理            if(this.state === 'pending'){                // 修改状态                this.state = 'fulfilled';                // 更新值                this.value = value;            }        };        // 定义失败函数，入参是失败原因        let reject = reason => {            // 同样的逻辑            if(this.state === 'pending'){                this.state = 'rejected';                this.reason = reason;            }        };        // 这是promise对象的的主逻辑，执行executor，如果执行器出错，则捕获错误后执行reject函数        try{            executor(resolve, reject);         }catch(err){            reject(err);        }    }    // 定义Promise的then函数    // then方法接收两个参数，如果状态为fulfilled，执行onFulfilled    // 如果状态为rejected，则执行onRejected    then(onFulfilled, onRejected){        if(this.state === 'fulfilled'){            onFulfilled(this.value);        };        if(this.state === 'rejected'){            onRejected(this.reason);        };    }}复制代码

进阶篇 解决异步实现

class Promise{    constructor(executor){        this.state = 'pending';        this.value = undefined;        this.reason = undefined;        // 成功回调函数数组和失败回调函数数组        this.onResolveCallbacks = [];        this.onRejectedCallbacks = [];        let resolve = value => {            if(this.state === 'pending'){                this.state = 'fulfilled';                this.value = value;                // 成功的话遍历成功回调函数数组然后执行这些函数                this.onResolvedCallbacks.forEach(fn=>fn());            }        };        let reject = reason => {            if(this.state === 'pending'){                this.state = 'rejected';                this.reason = reason;                // 失败的话遍历失败回调函数数组然后执行这些函数                this.onRejectedCallbacks.forEach(fn=>fn());            }        };        try{            executor(resolve,reject)        }catch(err){            reject(err);        }        then(onFulfilled, onRejected){            if(this.state === 'fulfilled'){                onFulfilled(this.value);            }            if(this.state === 'rejected'){                onRejected(this.reason);            }            // 当状态为等待态时，我们要将成功/失败的回调函数加入到对应的数组中            if(this.state === 'pending'){                // onFulfilled传入到成功数组                this.onResolvedCallbacks.push(()=>{                    onFulfilled(this.value);                })                // onRejected传入到成功数组                this.onRejectedCallbacks.push(()=>{                    onRejeced(this.reason);                })            }        }    }}复制代码

威力加强版 解决链式调用

class Promise{    constructor(executor){        this.state = 'pending';        this.value = undefined;        this.reason = undefined;        this.onResolvedCallbacks = [];        this.onRejectedCallbacks = [];        let resolve = value => {            if(this.state === 'pending'){                this.state = 'fulfilled';                this.value = value;                this.onResolvedCallbacks.forEach(fn=>fn());            }        };        let reject = reason => {            if(this.state === 'pending'){                this.state = 'rejected';                this.reason = reason;                this.onRejectedCallbacks.forEach(fn=>fn());            }        };        try{            executor(resolve,reject);        }catch(err){            reject(err);        }    }    then(onFulfilled, onRejected){        let promise2 = new Promise((resolve,reject) => {            if(this.state === 'fulfilled'){               let x = onFulfilled(this.value);                resolvePromise(promise2, x, resolve, reject);            };            if(this.state === 'rejected'){                let x = onRejected(this.reason);                resolvePromise(promise2, x, resolve, reject);            };            if(this.state === 'pending'){                this.onResolvedCallbacks.push(()=> {                    let x = onFulfilled(this.value);                    resolvePromise(promise2, x, resolve, reject);                })                this.onRejectedCallbacks.push(()=>{                    let x = onRejected(this.reason);                    resolvePromise(promise2, x, resolve, reject);                })            };        });        return promise2;    }    function resolvePromise(promise2, x, resolve, reject){        if(x === promise2){            return reject(new TypeError('Chaining cycle detected for promise');        }        let called;        if(x != null && (typeof x === 'object' || typeof x === 'function')){            try{                let then = x.then;                if(typeof then === 'function'){                    then.call(x, y=>{                        if(called){                            return;                        }                        called = true;                        resolvePromise(promise2,y,resolve,reject);                    }, err => {                        if(called) return;                        called = true;                        reject(err);                    })                }else{                    resolve(x);                }            }catch(e){                if(called) return;                called = true;                reject(e);            }        }else{            resolve(x);        }    }}复制代码

如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等各方面的问题，你都可以加入到我的Q群中:前114中6649后671，里面有许多前端学习资料以及2020大厂面试真题免费获取，希望能够对你们有所帮助。