美文网首页让前端飞
Promise学习笔记(知识点 + 手写Promise)

Promise学习笔记(知识点 + 手写Promise)

作者: Rocky_Wong | 来源:发表于2018-09-19 20:50 被阅读8次

    Promise标准了解一下

    传送门1⃣️ 👉Promises/A+规范

    传送门2⃣️ 👉阮一峰前辈ECMAScript 6入门——Promise对象

    Promise重点难点

    • Promise的状态不受外界影响,只由Promise内的异步操作结果决定。

    • Promise的状态一旦改变就不会再变。

      • pending 👉 fulfilled
      • pending 👉 rejected
    • Promise的构造函数是同步的,then()方法中的函数是异步的。

    • then()方法或者catch()方法的参数期望是函数,传入非函数则会发生值穿透

    • Promise属于microtask,同一次事件循环中,microtask永远在macrotask之前执行。

    手写promise

    • 实现基本状态(pending, fulfilled, rejected)
    • 实现then方法
      • 返回一个promise,实现链式调用
      • 实现状态判断
    • 实现resolve函数
      • 接受一个Promise作为参数时的情况,实现链式Promise
    • 执行回调函数时使用setTimeout,保证在注册then方法后触发
    • 实现Promise.all,Promise.race方法
    (function (window) {
        var Promise = function (fn) {
            var value = null;
            var callbacks = [];
            var state = 'pending'; // pending, fulfilled, rejected
    
            var promise = this;
    
            // 注册then事件,供resolve后调用
            promise.then = function (onFulfilled, onRejected) {
                // 返回promise实现链式promise调用
                return new Promise(function (resolve, reject) {
                    handle({
                        onFulfilled: onFulfilled || null,
                        onRejected: onRejected || null,
                        resolve: resolve,
                        reject: reject
                    })
                })
            }
    
            promise.catch = function(onRejected) {
                return promise.then(undefined, onRejected)
            }
            
            function handle (callback) {
                // 状态变化前,事件推进队列里;状态一旦变化后不再变动,直接执行结果
                if (state === 'pending') {
                    callbacks.push(callback);
                } else {
                    var cb = state === 'fulfilled' ? callback.onFulfilled : callback.onRejected
                    // then方法没有传递任何参数的情况下,返回结果值
                    if (!cb) {
                        cb = state === 'fulfilled' ? callback.resolve : callback.reject;
                        cb(value)
                    } else {
                        try {
                            var ret = cb(value);
                            callback.resolve(ret);
                        } catch (e) {
                            callback.reject(e)
                        }  
                    }
                }
            }
    
            function resolve(newValue) {
                // 状态一旦改变便不再改变
                if (state !== 'pending') return
                // 假如resolve了一个promise的话(链式promise)
                if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
                    var then = newValue.then;
                    if (typeof then === 'function') {
                        // 调用第二个promise中的then,递归直到不是一个promise值为止
                        then.call(newValue, resolve, reject);
                        return
                    }
                }
    
                value = newValue;
                state = 'fulfilled';
                
                execute()
            }
    
            function reject(reason) {
                // 状态一旦改变便不再改变
                if (state !== 'pending') return
                state = 'rejected'
                value = reason
    
                execute()
            }
    
            function execute() {
                // 使用setTimeOut保证resolve一定在then事件注册后执行
                setTimeout(() => {
                    callbacks.forEach(function (callback) {
                        handle(callback);
                    })
                }, 0);
            }
    
            fn(resolve, reject);
        }
    
        Promise.all = function (promises) {
            if (!Array.isArray(promises)) {
                throw new TypeError('请传入promise数组')
            }
    
            return new Promise(function (resolve, reject) {
                var result = [];
                var count = promises.length
    
                function reslover (index) {
                    return function(value) {
                        resloveAll(index, value)
                    }
                }
        
                function rejecter (reason) {
                    reject(reason)
                }
        
                function resloveAll (index, value) {
                    result[index] = value
                    // 等待全部promise执行完才执行resolve一个数组
                    if (--count === 0) {
                        resolve(result)
                    }
                }
    
                promises.forEach(function (promise, index) {
                    promise.then(reslover(index), rejecter)
                })
            })
        }
    
        Promise.race = function (promises) {
            if (!Array.isArray(promises)) {
                throw new TypeError('请传入promise数组')
            }
    
            return new Promise(function (resolve, reject) {
                function reslover (value) {
                    resolve(value)
                }
        
                function rejecter (reason) {
                    reject(reason)
                }
                promises.forEach(function (promise, index) {
                    promise.then(reslover, rejecter)
                })
            })
        }
    
        window.Promise = Promise
    
    })(window)
    
    /******************************************实例 */
    function test(i) {
        return new Promise(function (resolve) {
            setTimeout(() => {
            resolve(i); 
            }, 1000);
        })
    }
    
    function test2(i) {
        return new Promise(function (resolve, reject) {
            setTimeout(() => {
                if (i % 2) {
                resolve(i);  
                } else {
                reject(i); 
                }
            }, 2000);
        })
    }
    
    // 链式Promise
    test(1).then(test2).then(function (something) {
        console.log('case1: success!' + something);
    }).catch(function (something) {
        console.log('case1: failed!' + something);
    })
    
    // Promise.all
    Promise.all([test(2), test2(4)]).then(function (something) {
        console.log('case2: success!' + something);
    }).catch(function (something) {
        console.log('case2: failed!' + something)
    })
    
    // Promise.race
    Promise.race([test(3), test2(5)]).then(function (something) {
        console.log('case3: success!' + something);
    }).catch(function (something) {
        console.log('case3: failed!' + something)
    })
    
    // 多次改变状态,只有第一次生效
    function test3 () {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('success1')
                reject('error')
                resolve('success2')
            },0)
        })
    }
    
    test3().then((res) => {
        console.log('then: ', res)
    })
    
    // 一旦改变状态后,多次调用then()方法也只会马上得到Promise返回的值,Promise构造函数不会多次执行
    function test4 () {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
            resolve('success')
            }, 1000)
        })
    }
      
    const start = Date.now()
    test4().then((res) => {
        console.log(res, Date.now() - start)
    })
    test4().then((res) => {
        console.log(res, Date.now() - start)
    })
    

    相关文章

      网友评论

        本文标题:Promise学习笔记(知识点 + 手写Promise)

        本文链接:https://www.haomeiwen.com/subject/bzrwnftx.html