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

ralap 發布于2019-08-22 17:33 / 1960人閱讀

前言

作為一個后端過來的同學,剛入門前端的時候,被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() 的時候,并沒有馬上執行括號里面的回調函數,只是把括號里面的回調函數保存起來.

我們來梳理一下執行流程

先通過 then 把 thenCallback 存起來

this.then = function (cb) {
  that.cb = cb
}

這里的 cb , 就是上例的 thenCallback 所以其實可以等價于 this.cb = thenCallback

執行 promise 括號里的函數，并把事先定義好的 resolve 函數作為參數傳給他

fn(this.resolve)

這里的 fn , 就是上例的 promiseCallback

執行 promiseCallback 我們的邏輯就跳到 promiseCallback 函數內部去

setTimeout(() => {
  resolve("延時執行")
}, 1000)

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

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

執行 resolve 我們的邏輯就跳到 resolve 函數內部去

that.cb(data)

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

console.log(data)

所以就在1秒后輸出 延時執行

最后

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

阮一峰：ECMAScript 6 入門 - Promise 對象

深入 Promise(一)——Promise 實現詳解

淺談Promise之按照Promise/A+規范實現Promise類

如果覺得本文對您有用，請給本文的github加個star,萬分感謝

另外，github上還有其他一些關于前端的教程和組件，
有興趣的童鞋可以看看，你們的支持就是我最大的動力。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95277.html

【js】what is Promise和手寫實現簡易版Promise

摘要：有三種狀態，等待中，已完成，已失敗。對象狀態不受外界影響，只有異步操作的結果可以改變狀態，這就是的由來怎么用接受一個函數作為參數，這個參數函數的兩個參數分別是和，用來執行了兩種狀態的回調函數。當實例生成后，用方法來指定兩種狀態的回調函數。什么是Promise 官方的解釋：Promise是一個用來傳遞異步操作消息的對象。Promise有三種狀態，pending（等待中），resolve...

LMou 2019-08-23 18:25 評論0 收藏0
JavaScript之手寫Promise

摘要：如果狀態是等待態的話，就往回調函數中函數，比如如下代碼就會進入等待態的邏輯以上就是簡單版實現實現一個符合規范的接下來大部分代碼都是根據規范去實現的。為更好的理解，推薦閱讀Promise/A+ 規范實現一個簡易版 Promise 在完成符合 Promise/A+ 規范的代碼之前，我們可以先來實現一個簡易版 Promise，因為在面試中，如果你能實現出一個簡易版的 Promise ...

stefan 2019-08-23 15:25 評論0 收藏0
40行js實現一個簡易Promise

摘要：最近面試有問到的原理，以及實現的方法。所以自己動手實現了一個，發個文章記錄下。簡單分析下，實例對象有兩個屬性，一個是，一個是。最近面試有問到Promise的原理，以及實現的方法。所以自己動手實現了一個，發個文章記錄下。簡單分析下，promise實例對象有兩個屬性，一個是status，一個是value。還有一個then方法。status有3個狀態，pending,resolved,re...

nihao 2019-08-22 15:13 評論0 收藏0
超級易懂的redux-saga原理解析

摘要：原文地址前言筆者最近在做一些后臺項目，使用的是，其使用了處理異步數據流，本文將對的原理做一個簡單的解讀，并將實現一個簡易版的。函數的自動流程控制在中，是指一些長時操作，用函數表示。原文地址前言筆者最近在做一些后臺項目，使用的是Ant Design Pro，其使用了redux-saga處理異步數據流，本文將對redux-saga的原理做一個簡單的解讀，并將實現一個簡易版的redux...

wendux 2019-08-23 12:35 評論0 收藏0
KOA2框架原理解析和實現

摘要：實現的四大模塊上文簡述了源碼的大體框架結構，接下來我們來實現一個的框架，筆者認為理解和實現一個框架需要實現四個大模塊，分別是封裝創建類構造函數構造對象中間件機制和剝洋蔥模型的實現錯誤捕獲和錯誤處理下面我們就逐一分析和實現。什么是koa框架？ ? ? ? ?koa是一個基于node實現的一個新的web框架，它是由express框架的原班人馬打造的。它的特點是優雅、簡潔、表達力強、自由度...

tracymac7 2019-08-26 13:37 評論0 收藏0