手寫簡易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。函數

相關文章
相關標籤/搜索