10行代碼實現簡易版的Promise

實現之前，我們先看看Promise的調用

const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/799107458981776900.jpg?imageView&thumbnail=223x125&quality=100'

const promise = new Promise(function (resovle, reject) {
            var img = document.createElement('img')
            img.onload = function () {
                resovle(img)
            }

            img.onerror = function () {
                reject()
            }

            img.src = src
        })

promise.then(function (img) {
        console.log(img.width)
    }, function () {
        console.log('錯誤')
    }).then(function (img) {
        console.log(img.height)
        document.body.appendChild(img)
    })

下麵我們一邊分析，一邊實現自己的promise。

首先Promise是一個構造方法，並且初始化的時候傳入了一個函數作為參數

var MyPromise = function (doSomething) {
        this.doSomething = doSomething
    }

then方法很明顯可以看出是Promise的實例方法，並且可以實現鏈式調用，說明在then方法中返回了Promise實例，即this

MyPromise.prototype.after = function (resovle, reject) {
        this.doSomething(resovle, reject)
        return this
    }

此處的after方法相當於then方法。那麼MyPromise的簡易版就完成了。他的調用方法和示例的調用是一樣的。

const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/799107458981776900.jpg?imageView&thumbnail=223x125&quality=100'

const mypromise = new MyPromise(function (resovle, reject) {
            var img = document.createElement('img')
            img.onload = function () {
                resovle(img)
            }

            img.onerror = function () {
                reject()
            }

            img.src = src
        })

mypromise.after(function (img) {
        console.log(img.width)
    }, function () {
        console.log('錯誤')
    }).after(function (img) {
        console.log(img.height)
        document.body.appendChild(img)
    })

後記：相比Promise，這個實現過於簡單，功能上簡直不值一提。僅僅拋磚引玉。