3行代碼實現一個簡易版promise

前言

做爲一個後端過來的同窗,剛入門前端的時候,被js種種「反人類」的概念折騰的死去活來的. 其中一個印象比較深入的,就是promise,感受實在太難理解了...全部就有了寫個簡單的promise的想法. 但願能幫助到一些跟我同樣,感受promise很難理解的新同窗.

promise的教程網上多如牛毛,其中寫的比較通俗易懂的莫過於阮一峯的es6,反正我是他的書才懂的. 因此今天,咱們也不會來複述一遍如何使用promise,今天咱們從另外一個角度學習promise, 先本身動手造一個輪子--實現一個最簡單的promise,解決 回調地獄 的問題.

簡單實現

請看代碼

function easyPromise (fn) {
    this.then = cb => this.cb = cb
    this.resolve = data => this.cb(data)
    fn(this.resolve)
}
複製代碼

詳解

上面的代碼就實現了一個簡單的,實現then回調的「promise」,這裏爲了縮短代碼量,用了es6的簡寫,實際展開應該是這樣

function easyPromise (fn) {
    var that = this

    // 第一步,定義 then()
    this.then = function (cb) {
        //先將 then() 括號裏面的參數(回調函數)保存起來
        that.cb = cb
    }

    // 定義一個 resolve
    this.resolve = function(data) {
        that.cb(data)
    }

    // 將 resolve 做爲回調函數,傳給fn
    fn(this.resolve)
}
複製代碼

接下來咱們看看如何使用

new easyPromise((resolve) => {
    setTimeout(() => {
        resolve("延時執行")
    }, 1000)
}).then((data) => {
    console.log(data)
})
複製代碼

結果： 控制檯在1秒以後，輸出 延時執行

一樣爲了方便理解,咱們不妨把以上代碼寫好理解一點.

// 定義一個要傳給 promise 的函數，它接收一個函數（resolve）做爲參數。
// resolve 的做用是在合適的時間，通知 promise 應該要執行 then 裏面的回調函數了。
function promiseCallback (resolve) {
   setTimeout(() => {
      resolve("延時執行")
   }, 1000)
}

// 定義一個 要傳給 then 的回調函數
function thenCallback (data) {
    console.log(data)
}

// 實例化 promis,並分別傳入對應的回調
new easyPromise(promiseCallback)
.then(thenCallback)
複製代碼

tips: promise.then() 的時候,並無立刻執行括號裏面的回調函數,只是把括號裏面的回調函數保存起來.

咱們來梳理一下執行流程

1. 先經過 then 把 thenCallback 存起來

this.then = function (cb) {
  that.cb = cb
}
複製代碼

這裏的 cb , 就是上例的 thenCallback 因此其實能夠等價於 this.cb = thenCallback

2. 執行 promise 括號裏的函數，並把事先定義好的 resolve 函數做爲參數傳給他

fn(this.resolve)
複製代碼

這裏的 fn , 就是上例的 promiseCallback

3. 執行 promiseCallback 咱們的邏輯就跳到 promiseCallback 函數內部去

setTimeout(() => {
  resolve("延時執行")
}, 1000)
複製代碼

邏輯很簡單，就是等待1秒後，執行 resolve 函數， 這個 resolve 哪來的呢？

fn(this.resolve) -> promiseCallback (resolve) -> resolve

4. 執行 resolve 咱們的邏輯就跳到 resolve 函數內部去

that.cb(data)
複製代碼

這個 that.cb 又是哪來的呢？ 就是咱們第一步保存的 then括號裏面的回調函數，也就是 thenCallback

console.log(data)
複製代碼

因此就在1秒後輸出 延時執行

最後

好了，以上就是 promise 的核心邏輯，固然還有不少功能沒實現，不過本文的目的是幫助新手更好的瞭解 promise, 不是要實現一個完整的，符合 promise A+規範的 promise, 想要了解更多的童鞋，這裏推薦幾個連接

1. 阮一峯：ECMAScript 6 入門 - Promise 對象
2. 深刻 Promise(一)——Promise 實現詳解
3. 淺談Promise之按照Promise/A+規範實現Promise類

若是以爲本文對您有用，請給本文的github加個star,萬分感謝

另外，github上還有其餘一些關於前端的教程和組件， 有興趣的童鞋能夠看看，大家的支持就是我最大的動力。