手写Promise

预备知识

函数对象与实例对象

函数对象: 将函数作为对象使用时，简称为函数对象
实例对象: new 函数产生的对象，称为实例对象

两种类型的回调函数

同步回调函数: 理解: 立即执行，完全执行了完了才结束，不会放入回调队列中例子: 数组遍历相关的回调/Promise的executor函数

const arr = [1, ,2 ,3];
arr.forEach(item => {
    console.log(item)
});
console.log('forEach()之后');

异步回调理解: 不会立即执行，会放入回调队列中将来执行例子: 定时器回调/ajax回调/Promise的成功|失败的回调

setTimeout(() => {
    console.log('timeout callback()');
}, 0);
console.log('setTimeout()之后');

JS的error处理
3.1 错误类型

ReferenceError: 引用的变量不存在
TypeError: 数据类型不正确
RangeError: 数据值不在其所允许的范围内
SyntaxError: 语法错误 3.2 错误处理
捕获错误: try ... catch
抛出错误: throw error
3.3 错误类型
错误信息 message
错误栈 stack

try {
    const obj;
    console.log(obj.xxx);
} catch(error) {
    /*
        Error: 
            - message
            - stack
    */
    console.log(error.message);
    console.log(error.stack);
}
console.log('出错之后，代码继续执行')

function maybeError() {
    if (Math.random() < 0.5) {
        console.log('right');
    } else {
        throw new Error('something wrong!');
    }
}

try {
    maybeError();
} catch(e) {
    console.log(e.message);
    console.log(e.stack);
}

Promise使用

Promise是什么?

抽象表达 Promise是JS中进行异步编程的新的解决方案。
具体表达

从语法上说: Promise是一个构造函数
从功能上来说: promise对象用来封装一个异步操作并可以获取其结果

promise的状态改变

pending变为fulfilled
pending变为rejected
说明: 一个promise对象状态只能改变一次
无论变为成功还是事变，都会有一个结果数据。
成功的结果的数据一般称为value，失败的结果数据一般称为reason。

改变promise状态和指定回调函数谁先谁后？

都有可能，正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调
如何先改变状态再指定回调？
- 在执行器中直接调用resolve()/reject()
- 在延迟更长时间才调用then()
什么时候才能得到数据？
- 如果先执行的回调，那当状态发生改变时，回调函数就会调用，得到数据
- 如果先改变的状态，当指定回调时，回调函数就会调用，得到数据
promise.then()返回的新promise对象的结果状态由什么决定？
- 简单表达: 由then()指定的回调函数执行的结果决定
- 详细表达：
  - 如果抛出异常,返回的promise变为rejected，reason为抛出的异常
  - 如果返回的是非promise的任意值，新promise变为fulfilled，value为返回的值
  - 如果返回的是一个promise对象A，则A的结果就会作为新promise对象的结果

手写Promise

1. IIFE版

module.exports = Promise

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

function Promise(executor) {
    this.status = PENDING;
    this.data = undefined;
    this.callbacks = [];

    const resolve = (value) => {
        if (this.status !== PENDING) {
            return;
        }
        this.status = FULFILLED;
        this.data = value;
        if (this.callbacks.length > 0) {
            queueMicrotask(() => {
                this.callbacks.forEach(element => {
                    element.onResolved()
                });
            })
        }

    }
    const reject = (value) => {
        if (this.status !== PENDING) {
            return;
        }
        this.status = REJECTED;
        this.data = value;
        if (this.callbacks.length > 0) {
            queueMicrotask(() => {
                this.callbacks.forEach(element => {
                    element.onRejected()
                })
            })
        }
    }

    try {
        executor(resolve, reject);
    } catch (err) {
        reject(err);
    }
}

// Promise无论是构造函数还是实例对象，所有方法的返回结果都是promise对象
Promise.prototype.then = function (onResolved, onRejected) {
    if (typeof onResolved !== "function") {
        onResolved = value => value;
    }

    if (typeof onRejected !== "function") {
        onRejected = reason => { throw reason };
    }
    return new Promise((resolve, reject) => {
        const executeResult = (cb) => {
            try {
                let p = cb(this.data);
                if (p instanceof Promise) {
                    p.then(resolve, reject);
                } else {
                    resolve(p);
                }
            } catch (err) {
                reject(err);
            }
        }

        const handlePending = () => {
            this.callbacks.push({
                onResolved: () => {
                    executeResult(onResolved)
                },
                onRejected: () => {
                    executeResult(onRejected)
                }
            })
        }
        const handleFulFilled = () => {
            queueMicrotask(() => {
                executeResult(onResolved)
            })
        }
        const handleRejected = () => {
            queueMicrotask(() => {
                executeResult(onRejected)
            })
        }
        // 根据当前promise实例的三种状态，分别做不同的处理
        switch (this.status) {
            case PENDING:
                handlePending();
                break;
            case FULFILLED:
                handleFulFilled();
                break;
            case REJECTED:
                handleRejected();
                break;
            default:
                throw new Error("promise status is" + this.status)
        }
    })
}


Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
}

Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(resolve, reject);
        } else {
            resolve(value);
        }
    })
}
Promise.reject = function (value) {
    return new Promise((resolve, reject) => {
        reject(value);
    })
}

Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        promises.forEach(p => {
            p.then(
                value => {
                    resolve(value)
                },
                reason => {
                    reject(reason)
                }
            )
        })
    })
}

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let count = 0;
        let result = new Array(promise.length);

        promises.forEach((p, index) => {
            p.then(
                value => {
                    count++;
                    result[index] = value;

                    if (count === promises.length) {
                        resolve(result);
                    }
                },
                reason => {
                    reject([reason])
                }
            )
        })
    })
}

2. ES6-class版



const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class Promise {
    constructor(executor) {
        this.status = PENDING;
        this.data = undefined;
        this.callbacks = [];

        const resolve = (value) => {
            if (this.status !== PENDING) {
                return;
            }

            this.status = FULFILLED;
            this.data = value;

            if (this.callbacks.length > 0) {
                queueMicrotask(() => {
                    this.callbacks.forEach(cb => {
                        cb.onResolved(value)
                    })
                })
            }
        }
        const reject = (value) => {
            if (this.status !== PENDING) {
                return;
            }
            this.status = REJECTED;
            this.data = value;

            if (this.callbacks.length > 0) {
                queueMicrotask(() => {
                    this.callbacks.forEach(cb => {
                        cb.onRejected(value)
                    })
                })
            }
        }

        try {
            executor(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }

    then(onResolved, onRejected) {
        return new Promise((resolve, reject) => {
            const handleResult = (handler) => {
                try {
                    let p = handler(this.data);
                    if (p instanceof Promise) {
                        p.then(resolve, reject);
                    } else {
                        resolve(p);
                    }
                } catch (error) {
                    reject(error);
                }
            }
            const handlePending = () => {
                this.callbacks.push({
                    onResolved: () => {
                        handleResult(onResolved);
                    },
                    onRejected: () => {
                        handleResult(onRejected);
                    }
                })
            }
            switch (this.status) {
                case PENDING:
                    handlePending();
                    break;
                case FULFILLED:
                    queueMicrotask(() => {
                        handleResult(onResolved);
                    })
                    break;
                case REJECTED:
                    queueMicrotask(() => {
                        handleResult(onRejected);
                    })
                    break;
                default:
                    throw new Error("status is wrong" + this.status);
            }
        })
    }
    catch(onRejected) {
        return this.then(null, onRejected);
    }

    static resolved(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(resolve, reject);
            } else {
                resolve(value);
            }
        })
    }
    static rejected(value) {
        return new Promise((resolve, reject) => {
            reject(value)
        })
    }
    static race(promises) {
        return new Promise((resolve, reject) => {
            promises.forEach(p => {
                p.then(
                    value => {
                        resolve(value);
                    },
                    reason => {
                        reject(reason);
                    }
                )
            })
        })
    }
    static all(promises) {
        return new Promise((resolve, reject) => {
            let count = 0;
            let result = new Array(promises.length);
            promises.forEach((p, index) => {
                p.then(
                    value => {
                        count++;
                        result[index] = value;
                        if (count === promises.length) {
                            resolve(result);
                        }
                    },
                    reason => {
                        reject([reason])
                    }
                )
            })
        })
    }
}
module.exports = Promise

3. TS版

async与await

语法: [return_value] = await expression

async函数
函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定
await 表达式
await 右侧的表达式一般为promise对象，但也可以是其它的值
如果表达式是promise对象，await返回的是promise成功的值
如果表达式是其它值，直接将此值作为await的返回值
注意:
await必须写在async函数中，但async函数中可以没有await
如果await的promise失败了，就会抛出异常，需要通过try...catch来捕获处理

宏队列和微队列(浏览器)

int main() {

    //...
    
    //event loop
    while(true) {
        // 微队列
        
        // 宏队列
    }
}

宏队列
- 定时器
微队列
- Observer API
- then方法里注册的回调

JS引擎执行代码:

同步代码
每次准备取出第一个宏任务执行前，需要清空微任务队列

面试题

setTimeout(() => {
    console.log("0");
}, 0);

new Promise((resolve, reject) => {
    console.log("1");
    resolve()
}).then(() => {
    console.log("2");
    new Promise((resolve, reject) => {
        console.log("3");
        resolve();
    }).then(() => {
        console.log("4");
    }).then(() => {
        console.log("5");
    })
}).then(() => {
    console.log("6");
})

new Promise((resolve, reject) => {
    console.log("7")
    resolve()
}).then(() => {
    console.log("8")
})

nodejs体系 之 promise

手写Promise

预备知识

Promise使用

Promise是什么?

promise的状态改变

改变promise状态和指定回调函数谁先谁后？

手写Promise

1. IIFE版

2. ES6-class版

3. TS版

async与await

宏队列和微队列(浏览器)

面试题

nodejs体系之 promise