图解JavaScript——代码实现【2】（重点是Promise、Async、发布/订阅原理实现）

蔚落 2022-12-13 12:59 136阅读 0赞

> 本节主要阐述六种异步方案:回调函数、事件监听、发布/订阅、Promise、Generator和Async。其中重点是发布/订阅、Promise、Async的原理实现，通过对这几点的了解，希望我们前端切图仔能够在修炼内功的路上更进一步。  
>

## 一、六种异步方案 ##

![format_png][]

### 1.1 回调函数 ###

> 异步编程的最基本方法，把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。

*  优点：简单、容易理解和实现。
 *  缺点：多次调用会使代码结构混乱，形成回调地狱。

function sleep(time, callback) {
        setTimeout(() => {
            // 一些逻辑代码
            callback();
        }, time);
    }

### 1.2 事件监听 ###

> 异步任务的执行不取决于代码的执行顺序，而取决于某个事件是否发生。

*  优点：易于理解，此外对于每个事件可以指定多个回调函数，而且可以“去耦合”，有利于实现模块化。
 *  缺点：整个程序都要变成事件驱动型，运行流程会变得很不清晰。

dom.addEventListener('click', () => {
        console.log('dom被点击后触发！！！');
    })

### 1.3 发布/订阅 ###

> 发布/订阅模式在观察者模式的基础上，在目标和观察者之间增加一个调度中心。订阅者（观察者）把自己想要订阅的事件注册到调度中心，当该事件触发的时候，发布者（目标）发布该事件到调度中心，由调度中心统一调度订阅者注册到调度中心的处理代码。

### 1.4 Promise ###

> Promise 是异步编程的一种解决方案，是为解决回调函数地狱这个问题而提出的，它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套改为链式调用。

*  优点：将回调函数的嵌套改为了链式调用；使用then方法以后，异步任务的两端执行看的更加清楚。
 *  缺点：Promise 的最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆then，原来的语义变得很不清楚。

### 1.5 Generator ###

> Generator 函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。其最大特点是可以控制函数的执行。

*  优点：异步操作表示的很简洁，此外可以控制函数的执行。
 *  缺点：流程管理不方便，不能实现自动化的流程管理。

function* genF() {
        yield 'come on!';
        yield 'Front End Engineer';
        return 'goood';
    }
    
    const gF = genF();
    gF.next();// {value: "come on!", done: false}
    gF.next();// {value: "Front End Engineer", done: false}
    gF.next();// {value: "goood", done: true}
    gF.next();// {value: undefined, done: true}

### 1.6 Async ###

> ES2017 标准引入了async函数，使得异步操作变得更加方便。简言之，该函数就是Generator函数的语法糖。

*  优点：内置执行器，可以自动执行；语义相比Generator更加清晰；返回值是Promise，比Generator函数的返回值是Iterator对象操作更加方便。
 *  增加学习成本。

async function asyncFun() {
        await func1()
        
        await func2();
        
        return '666';
    }
    function func1() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('888')
            }, 100);
        }).then((value) => {
            console.log(value);
        });
    }
    
    function func2() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('777')
            });
        }).then((value) => {
            console.log(value);
        });
    }
    
    asyncFun().then((value) => {
        console.log(value);
    });
    // 888
    // 777
    // 666

## 二、Promise原理实现 ##

> 不管是实际开发中还是面试过程中，各位老铁们对Promise肯定不会陌生，下面就让我们一起来唠一唠Promsie的实现原理，根据PromiseA+规范来进行实现，然后对其相关的静态方法（Promise.resolve()、Promise.reject()、Promise.all()、Promise.race()）和实例方法（Promise.prototype.catch()、Promise.prototype.finally()）进行实现。

![format_png 1][]

### 2.1 思考一下 ###

> 首先用一幅图来展示一下我考虑实现这个函数的思路吧。

![format_png 2][]

### 2.2 根据Promise/A+规范实现Promise ###

> 人家有相关标准，我们就要遵守，毕竟遵纪守法才是好公民，现在只能硬着头皮把这个标准过一遍。

![format_png 3][]

> 下面就是基于Promise/A+规范实现的代码，已经经过promises-aplus-tests库进行了验证。

### 2.2 其他方法 ###

> 按照Promise/A+规范实现了Promise的核心内容，但是其只实现了Promise.prototype.then()方法，那其它方法呢？下面我们就唠一唠其它方法，包括静态方法（Promise.resolve()、Promise.reject()、Promise.all()、Promise.race()）和实例方法（Promise.prototype.catch()、Promise.prototype.finally()）。

![format_png 4][]

#### 2.2.1 Promise.resolve() ####

![format_png 5][]

class Promise {
        // ...
        // 将现有对象转为 Promise 对象
        static resolve(value) {
            // 如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
            if (value instanceof Promise) return value;
    
            // 参数是一个thenable对象（具有then方法的对象）,Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。
            if (typeof value === 'object' || typeof value === 'function') {
                try {
                    let then = value.then;
                    if (typeof then === 'function') {
                        return new Promise(then.bind(value));
                    }
                } catch (e) {
                    return new Promise((resolve, reject) => {
                        reject(e);
                    })
                }
            }
    
            // 参数不是具有then方法的对象，或根本就不是对象,Promise.resolve方法返回一个新的 Promise 对象，状态为resolved。
            return new Promise((resolve, reject) => {
                resolve(value);
            })
        }
    }

#### 2.2.2 Promise.reject() ####

![format_png 6][]

class Promise {
        // ...
        // 返回一个新的 Promise 实例，该实例的状态为rejected。
        static reject(reason) {
            return new Promise((resolve, reject) => {
                reject(reason);
            })
        }
    }

#### 2.2.3 Promise.all() ####

![format_png 7][]

class Promise {
        // ...
        // 用于将多个 Promise 实例，包装成一个新的 Promise 实例。只有所有状态都变为fulfilled，p的状态才会是fulfilled
        static all(promises) {
            const values = [];
            let resolvedCount = 0;
            return new Promise((resolve, reject) => {
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(value => {
                        resolvedCount++;
                        values[index] = value;
                        if (resolvedCount === promises.length) {
                            resolve(values);
                        }
                    }, reason => {
                        reject(reason);
                    })
                })
            })
        }
    }

#### 2.2.4 Promise.race() ####

![format_png 8][]

class Promise {
        // ...
         // 只要有一个实例率先改变状态，状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给回调函数。
        static race(promises) {
            return new Promise((resolve, reject) => {
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(value => {
                        resolve(value);
                    }, reason => {
                        reject(reason);
                    })
                })
            })
        }
    }

#### 2.2.5 Promise.catch() ####

![format_png 9][]

class Promise {
        // ...
        // 是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
        catch(onRejected) {
            return this.then(undefined, onRejected);
        }
    }

#### 2.2.6 Promise.finally() ####

![format_png 10][]

class Promise {
        // ...
        // 用于指定不管 Promise 对象最后状态如何，都会执行的操作。
        finally(callback) {
            return this.then(
                value => Promise.resolve(callback()).then(() => value),
                reason => Promise.resolve(callback()).then(() => { throw reason })
            )
        }
    }

## 三、Async原理实现 ##

> 在开发过程中常用的另一种异步方案莫过于Async，通过async函数的引入使得异步操作变得更加方便。实质上，async是Generator的语法糖，最大的亮点是async内置执行器，调用后即可自动执行，不像Generator需要调用next()方法才能执行。

![format_png 11][]

> 这是Async的实现原理，即将Generator函数作为参数放入run函数中，最终实现自动执行并返回Promise对象。

## 四、发布/订阅实现 ##

更加详细内容可以参考[《图解23种设计模式》][23]

![format_png 12][]

// 发布订阅（TypeScript版）
    interface Publish {
        registerObserver(eventType : string, subscribe : Subscribe) : void;
        remove(eventType : string, subscribe ?: Subscribe) : void;
        notifyObservers(eventType : string) : void;
    }
    interface SubscribesObject{
        [key : string] : Array<Subscribe>
    }
    class ConcretePublish implements Publish {
        private subscribes : SubscribesObject;
    
        constructor() {
            this.subscribes = {};
        }
    
        registerObserver(eventType : string, subscribe : Subscribe) : void {
            if (!this.subscribes[eventType]) {
                this.subscribes[eventType] = [];
            }
    
            this.subscribes[eventType].push(subscribe);
        }
    
        remove(eventType : string, subscribe ?: Subscribe) : void {
            const subscribeArray = this.subscribes[eventType];
            if (subscribeArray) {
                if (!subscribe) {
                    delete this.subscribes[eventType];
                } else {
                    for (let i = 0; i < subscribeArray.length; i++) {
                        if (subscribe === subscribeArray[i]) {
                            subscribeArray.splice(i, 1);
                        }
                    }
                }
            }
        }
    
        notifyObservers(eventType : string, ...args : any[]) : void {
            const subscribes = this.subscribes[eventType];
            if (subscribes) {
                subscribes.forEach(subscribe => subscribe.update(...args))
            }
        }
    }
    
    interface Subscribe {
        update(...value : any[]) : void;
    }
    
    class ConcreteSubscribe1 implements Subscribe {
        public update(...value : any[]) : void {
            console.log('已经执行更新操作1，值为', ...value);
        }
    }
    class ConcreteSubscribe2 implements Subscribe {
        public update(...value : any[]) : void {
            console.log('已经执行更新操作2，值为', ...value);
        }
    }
    
    function main() {
        const publish = new ConcretePublish();
        const subscribe1 = new ConcreteSubscribe1();
        const subscribe2 = new ConcreteSubscribe2();
    
        publish.registerObserver('1', subscribe1);
        publish.registerObserver('2', subscribe2);
    
        publish.notifyObservers('2', '22222');
    }
    
    main();

> 相关章节  
> [图解JavaScript——代码实现【1】][JavaScript_1]  
> [图解JavaScript————基础篇][JavaScript]  
> [图解JavaScript————进阶篇][JavaScript 1]  
> [图解23种设计模式（TypeScript版）][23]  
>

> 参考链接  
> Prmose/A+  
> Promise源码实现  
> ES6入门教程

[format_png]: /images/20221123/b2b4ca8a04b949b48c726d4ce0d4e9ee.png
[format_png 1]: /images/20221123/adefe12c9bf44417a33480c3383efaae.png
[format_png 2]: /images/20221123/870ccc46640e4701bec568507635fb9c.png
[format_png 3]: /images/20221123/4e4bebe57bf34d5e8144b75cba9d6df7.png
[format_png 4]: /images/20221123/56c9c057ccd3429aafdcb64444f01f9d.png
[format_png 5]: /images/20221123/34e65c06c8e14e62ba2b0725e79af43c.png
[format_png 6]: /images/20221123/75c169da128e4866962c63d3ff7be5d4.png
[format_png 7]: /images/20221123/e6483130d8ce410e99f9757dae314335.png
[format_png 8]: /images/20221123/bcff02b21e6c4918a4f2e22faf484004.png
[format_png 9]: /images/20221123/441d9c20290942168305fd2d1dfd0d84.png
[format_png 10]: /images/20221123/73d2c1bbe60b47d9822bad5166b81517.png
[format_png 11]: /images/20221123/e6e81f16d7a1498bbf2480e4519ad4d4.png
[23]: https://mp.weixin.qq.com/s?__biz=MzIxMjExNzQxMQ%3D%3D&idx=1&mid=2247483869&scene=21&sn=de794163263fb2e069968783a575b726#wechat_redirect
[format_png 12]: /images/20221123/7f36c6e6edbc4c4aab61dae158272972.png
[JavaScript_1]: https://mp.weixin.qq.com/s?__biz=MzIxMjExNzQxMQ%3D%3D&idx=1&mid=2247483892&scene=21&sn=049ee4a8dfee3a03e253a13e96ef5f54#wechat_redirect
[JavaScript]: https://mp.weixin.qq.com/s?__biz=MzIxMjExNzQxMQ%3D%3D&idx=1&mid=2247483792&scene=21&sn=108e2f1a0a53b3d266f44ba6c91042a1#wechat_redirect
[JavaScript 1]: https://mp.weixin.qq.com/s?__biz=MzIxMjExNzQxMQ%3D%3D&idx=1&mid=2247483815&scene=21&sn=1ada06f1e3c491b0b0e17e2e9bb7e12c#wechat_redirect