手写简易Promise

前言

首先,我是一名前端小白,若是如下内容有错误或值得改进的地方,还请各位大佬多多指点哈(疯狂吐槽)前端

Promise相信你们确定至关熟悉,但对于像我刚入门的小白来讲,想彻底理解Promise的内部原理仍是挺困难的。编程

Promise 对象拥有很强大的功能,它容许你为异步操做的成功和失败分别绑定相应的处理方法。 这让异步操做能够像同步操做同样返回值,但并非当即返回最终执行结果,而是一个能表明将来出现的结果的promise对象,Promise有如下几种状态:promise

pending: 初始状态,状态变化前的就绪状态。
fulfilled: 意味着操做成功完成。
rejected: 意味着操做失败。
复制代码

pending状态的promise对象可能转变为fulfilled状态,也可能转变rejected状态。在这个状态转变的过程当中,状态的变化是不可逆的。状态一旦改变,Promise对象的then方法绑定的处理方法就会被调用。bash

coding

了解以上的内容基本上就能够实现一个简易的promise对象,代码:异步

//简易promise实现(resolve,reject)
        function promise(fn) {
            this.value = undefined // 成功状态值
            this.err = undefined // 失败状态值
            this.status = 'pending' // 开始状态(就绪)
            var t = this
            // 就绪 -> 成功
            function resolve(val) {
                if (t.status === 'pending') {
                    t.value = val
                    t.status = 'success'
                }
            }
            // 就绪 -> 失败
            function reject(err) {
                if (t.status === 'pending') {
                    t.err = err
                    t.status = 'fail'
                }
            }
            fn(resolve, reject)
        }
        promise.prototype.then = function(isSuccess, isFail) {
            var t = this
            // 实现promise的链式调用
            return new promise(function(resolve, reject) {
                // 用setTimeout模拟实现then方法的异步操做
                setTimeout(function() {
                    if (t.status === 'success') {
                        // 将then1回调函数返回的值传给then2回调函数,以此类推
                        resolve(isSuccess(t.value))
                    }
                    if (t.status === 'fail') {
                        reject(isFail(t.err))
                    }
                })
            })

        }
        
        // test 
        var p = new promise(function(resolve, reject) {
            if (1) {
                resolve("test resolve success")
            } else {
                reject("test rejecr fail")
            }

        })
        p.then(function(val) {
            console.log(val)
            return val + "链式调用return"
        }).then(function(val) {
            console.log(val)
        })
        
        // test resolve success
        // test resolve success链式调用return
复制代码

从上面的代码能够看出我只是简单实现了resolve、reject的功能,并无考虑异常,和多个resolve回调的处理状况。在后续的学习中,会逐步实现一个完整的promise对象(好难,哈哈!)异步编程

结论

promise在异步编程中的使用是至关普遍的,刚入门的前端小白对于异步编程理解的不是很透彻,但愿经过此例子对异步编程思想有一个更深入的认识,如:even loop。函数

相关文章
相关标签/搜索