前端面试系列-JavaScript-Promise(含手写代码)

╰半夏微凉° 2022-11-12 15:57 213阅读 0赞

### 文章目录 ###

*  一、promise
 *  二、链式操作的用法
 *  三、reject的用法
 *  四、catch的用法
 *  五、all的用法
 *   *  场景
 *  六、race的用法
 *   *  场景
 *  七、Promsie 与事件循环
 *  八、手写代码

# 一、promise #

Promise是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

Promise存在三个状态（state）pending、fulfilled、rejected

*  pending（等待态）为初始态，并可以转化为fulfilled（成功态）和rejected（失败态）
 *  成功时，不可转为其他状态，且必须有一个不可改变的值（value）
 *  失败时，不可转为其他状态，且必须有一个不可改变的原因（reason）

new一个

var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('成功数据');
        }, 2000);
    });

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。

我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数，如：

在我们包装好的函数最后，会return出Promise对象，也就是说，执行这个函数我们得到了一个Promise对象。

runAsync().then(function(data){
        console.log(data);
        //后面可以用传过来的数据做些其他操作
        //......
    });

在runAsync()的返回上直接调用then方法，then接收一个参数，是函数，并且会拿到我们在runAsync中调用resolve时传的的参数。运行这段代码，会在2秒后输出“执行完成”，紧接着输出“成功数据”。

**Promise能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。**

# 二、链式操作的用法 #

runAsync1()
    .then(function(data){
        console.log(data);
        return runAsync2();
    })
    .then(function(data){
        console.log(data);
        return runAsync3();
    })
    .then(function(data){
        console.log(data);
    });

这样能够按顺序，每隔两秒输出每个异步回调中的内容，在runAsync2中传给resolve的数据，能在接下来的then方法中拿到。运行结果如下：

异步任务1执行完成
    成功数据1
    异步任务2执行完成
    成功数据2
    异步任务3执行完成
    成功数据3

runAsync1、runAsync2、runAsync3这三个函数定义

**在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了，比如我们把上面的代码修改成这样：**

runAsync1()
    .then(function(data){
        console.log(data);
        return runAsync2();
    })
    .then(function(data){
        console.log(data);
        return '直接返回数据';  //这里直接返回数据
    })
    .then(function(data){
        console.log(data);
    });
    
    异步任务1执行完成
    成功数据1
    异步任务2执行完成
    成功数据2
    直接返回数据

# 三、reject的用法 #

reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。看下面的代码。

then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。

# 四、catch的用法 #

它和then的第二个参数一样，用来指定reject的回调，用法是这样：

getNumber()
    .then(function(data){
        console.log('resolved');
        console.log(data);
    })
    .catch(function(reason){
        console.log('rejected');
        console.log(reason);
    });

效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。

getNumber()
    .then(function(data){
        console.log('resolved');
        console.log(data);
        console.log(somedata); //此处的somedata未定义
    })
    .catch(function(reason){
        console.log('rejected');
        console.log(reason);
    });

**与我们的try/catch语句有相同的功能。**

# 五、all的用法 #

(所有的都完成了才执行then())

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function(results){
        console.log(results);
    });
    
    异步任务1执行完成
    异步任务2执行完成
    异步任务3执行完成
    ["成功数据1","成功数据2","成功数据3"]

用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。所以上面代码的输出结果就是：

## 场景 ##

一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。

# 六、race的用法 #

(有一个完成了就执行then())

all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样，我们把上面runAsync1的延时改为1秒来看一下：

Promise
    .race([runAsync1(), runAsync2(), runAsync3()])
    .then(function(results){
        console.log(results);
    });
    
    异步任务1执行完成
    成功数据1
    异步任务2执行完成
    异步任务3执行完成

1秒后runAsync1已经执行完了，此时then里面的就执行了，在then里面的回调开始执行时，runAsync2()和runAsync3()并没有停止，仍旧再执行。于是再过1秒后，输出了他们结束的标志。

## 场景 ##

比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：

//请求某个图片资源
    function requestImg(){
        var p = new Promise(function(resolve, reject){
            var img = new Image();
            img.onload = function(){
                resolve(img);
            }
            img.src = 'xxxxxx';
        });
        return p;
    }
    
    //延时函数，用于给请求计时
    function timeout(){
        var p = new Promise(function(resolve, reject){
            setTimeout(function(){
                reject('图片请求超时');//在这里then只有一个参数，所以被catch捕获
            }, 5000);
        });
        return p;
    }
    
    Promise
    .race([requestImg(), timeout()])
    .then(function(results){
        console.log(results);
    })
    .catch(function(reason){
        console.log(reason);
    });

如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。

# 七、Promsie 与事件循环 #

Promise在初始化时，传入的函数是同步执行的，然后注册 then 回调。注册完之后，继续往下执行同步代码，在这之前，then 中回调不会执行。同步代码块执行完毕后，才会在事件循环中检测是否有可用的 promise 回调（微任务队列中），如果有，那么执行，如果没有，继续下一个事件循环。

[事件循环相关文章:https://blog.csdn.net/qq\_39903567/article/details/115048135][https_blog.csdn.net_qq_39903567_article_details_115048135]

# 八、手写代码 #

class Promise {
        //executor里面有两个参数，一个叫resolve（成功），一个叫reject（失败）。
        constructor(executor) {
            // 初始化state为等待态
            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());
                }
            };
            // 如果executor执行报错，直接执行reject
            try {
                executor(resolve, reject);
            } catch (err) {
                reject(err);
            }
        }
        then(onFulfilled, onRejected) { //成功的值，失败的原因
            // onFulfilled如果不是函数，就忽略onFulfilled，直接返回value
            onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
            // onRejected如果不是函数，就忽略onRejected，直接扔出错误
            onRejected = typeof onRejected === 'function' ? onRejected : err => {
                throw err
            };
            // 声明返回的promise2
            let promise2 = new Promise((resolve, reject) => {
                // 状态为fulfilled，执行onFulfilled，传入成功的值
                if (this.state === 'fulfilled') {
                    // 异步
                    setTimeout(() => {
                        try {
                            let x = onFulfilled(this.value);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (e) {
                            reject(e);
                        }
                    }, 0);
                };
                // 状态为rejected，执行onRejected，传入失败的原因
                if (this.state === 'rejected') {
                    // 异步
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.reason);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (e) {
                            reject(e);
                        }
                    }, 0);
                };
                if (this.state === 'pending') {
                    // onFulfilled传入到成功数组
                    this.onResolvedCallbacks.push(() => {
                        // 异步
                        setTimeout(() => {
                            try {
                                let x = onFulfilled(this.value);
                                resolvePromise(promise2, x, resolve, reject);
                            } catch (e) {
                                reject(e);
                            }
                        }, 0);
                    });
                    // onRejected传入到失败数组
                    this.onRejectedCallbacks.push(() => {
                        // 异步
                        setTimeout(() => {
                            try {
                                let x = onRejected(this.reason);
                                resolvePromise(promise2, x, resolve, reject);
                            } catch (e) {
                                reject(e);
                            }
                        }, 0)
                    });
                };
            });
            // 返回promise，完成链式
            return promise2;
        }
        catch (fn) {
            return this.then(null, fn);
        }
    }

//resolve方法
    Promise.resolve = function (val) {
        return new Promise((resolve, reject) => {
            resolve(val)
        });
    }

//reject方法
    Promise.reject = function (val) {
        return new Promise((resolve, reject) => {
            reject(val)
        });
    }

//race方法 
    Promise.race = function (promises) {
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(resolve, reject)
            };
        })
    }

//all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)
    Promise.all = function (promises) {
        let arr = [];
        let i = 0;
    
        function processData(index, data) {
            arr[index] = data;
            i++;
            if (i == promises.length) {
                resolve(arr);
            };
        };
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(data => {
                    processData(i, data);
                }, reject);
            };
        });
    }

[参考文章：https://juejin.cn/post/https://juejin.cn/post/68449036257690910796844903625769091079][https_juejin.cn_post_https_juejin.cn_post_68449036257690910796844903625769091079]

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/115180758][https_blog.csdn.net_qq_39903567_article_details_115180758]

[https_blog.csdn.net_qq_39903567_article_details_115048135]: https://blog.csdn.net/qq_39903567/article/details/115048135
[https_juejin.cn_post_https_juejin.cn_post_68449036257690910796844903625769091079]: https://juejin.cn/post/https://juejin.cn/post/68449036257690910796844903625769091079
[https_blog.csdn.net_qq_39903567_article_details_115180758]: https://blog.csdn.net/qq_39903567/article/details/115180758