成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

3行代碼實(shí)現(xiàn)一個(gè)簡(jiǎn)易版promise

ralap / 1966人閱讀

前言

作為一個(gè)后端過(guò)來(lái)的同學(xué),剛?cè)腴T前端的時(shí)候,被js種種「反人類」的概念折騰的死去活來(lái)的.
其中一個(gè)印象比較深刻的,就是promise,感覺(jué)實(shí)在太難理解了...所有就有了寫個(gè)簡(jiǎn)單的promise的想法.
希望能幫助到一些跟我一樣,感覺(jué)promise很難理解的新同學(xué).

promise的教程網(wǎng)上多如牛毛,其中寫的比較通俗易懂的莫過(guò)于阮一峰的es6,反正我是他的書才懂的.
所以今天,我們也不會(huì)來(lái)復(fù)述一遍如何使用promise,今天我們從另一個(gè)角度學(xué)習(xí)promise,
先自己動(dòng)手造一個(gè)輪子--實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的promise,解決 回調(diào)地獄 的問(wèn)題.

簡(jiǎn)單實(shí)現(xiàn)

請(qǐng)看代碼

function easyPromise (fn) {
    this.then = cb => this.cb = cb
    this.resolve = data => this.cb(data)
    fn(this.resolve)
}
詳解

上面的代碼就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的,實(shí)現(xiàn)then回調(diào)的「promise」,這里為了縮短代碼量,用了es6的簡(jiǎn)寫,實(shí)際展開應(yīng)該是這樣

function easyPromise (fn) {
    var that = this

    // 第一步,定義 then()
    this.then = function (cb) {
        //先將 then() 括號(hào)里面的參數(shù)(回調(diào)函數(shù))保存起來(lái)
        that.cb = cb
    }

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

    // 將 resolve 作為回調(diào)函數(shù),傳給fn
    fn(this.resolve)
}

接下來(lái)我們看看如何使用

new easyPromise((resolve) => {
    setTimeout(() => {
        resolve("延時(shí)執(zhí)行")
    }, 1000)
}).then((data) => {
    console.log(data)
})

結(jié)果： 控制臺(tái)在1秒之后，輸出 延時(shí)執(zhí)行

同樣為了方便理解,我們不妨把以上代碼寫好理解一點(diǎn).

// 定義一個(gè)要傳給 promise 的函數(shù)，它接收一個(gè)函數(shù)（resolve）作為參數(shù)。
// resolve 的作用是在合適的時(shí)間，通知 promise 應(yīng)該要執(zhí)行 then 里面的回調(diào)函數(shù)了。
function promiseCallback (resolve) {
   setTimeout(() => {
      resolve("延時(shí)執(zhí)行")
   }, 1000)
}

// 定義一個(gè) 要傳給 then 的回調(diào)函數(shù)
function thenCallback (data) {
    console.log(data)
}

// 實(shí)例化 promis,并分別傳入對(duì)應(yīng)的回調(diào)
new easyPromise(promiseCallback)
.then(thenCallback)
tips:  promise.then() 的時(shí)候,并沒(méi)有馬上執(zhí)行括號(hào)里面的回調(diào)函數(shù),只是把括號(hào)里面的回調(diào)函數(shù)保存起來(lái).

我們來(lái)梳理一下執(zhí)行流程

先通過(guò) then 把 thenCallback 存起來(lái)

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

這里的 cb , 就是上例的 thenCallback 所以其實(shí)可以等價(jià)于 this.cb = thenCallback

執(zhí)行 promise 括號(hào)里的函數(shù)，并把事先定義好的 resolve 函數(shù)作為參數(shù)傳給他

fn(this.resolve)

這里的 fn , 就是上例的 promiseCallback

執(zhí)行 promiseCallback 我們的邏輯就跳到 promiseCallback 函數(shù)內(nèi)部去

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

邏輯很簡(jiǎn)單，就是等待1秒后，執(zhí)行 resolve 函數(shù)， 這個(gè) resolve 哪來(lái)的呢？

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

執(zhí)行 resolve 我們的邏輯就跳到 resolve 函數(shù)內(nèi)部去

that.cb(data)

這個(gè) that.cb 又是哪來(lái)的呢？ 就是我們第一步保存的 then括號(hào)里面的回調(diào)函數(shù)，也就是 thenCallback

console.log(data)

所以就在1秒后輸出 延時(shí)執(zhí)行

最后

好了，以上就是 promise 的核心邏輯，當(dāng)然還有很多功能沒(méi)實(shí)現(xiàn)，不過(guò)本文的目的是幫助新手更好的了解 promise,
不是要實(shí)現(xiàn)一個(gè)完整的，符合 promise A+規(guī)范的 promise, 想要了解更多的童鞋，這里推薦幾個(gè)鏈接

阮一峰：ECMAScript 6 入門 - Promise 對(duì)象

深入 Promise(一)——Promise 實(shí)現(xiàn)詳解

淺談Promise之按照Promise/A+規(guī)范實(shí)現(xiàn)Promise類

如果覺(jué)得本文對(duì)您有用，請(qǐng)給本文的github加個(gè)star,萬(wàn)分感謝

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95277.html

相關(guān)文章

  • 【js】what is Promise和手寫實(shí)現(xiàn)簡(jiǎn)易版Promise

    摘要：有三種狀態(tài)，等待中，已完成，已失敗。對(duì)象狀態(tài)不受外界影響，只有異步操作的結(jié)果可以改變狀態(tài)，這就是的由來(lái)怎么用接受一個(gè)函數(shù)作為參數(shù)，這個(gè)參數(shù)函數(shù)的兩個(gè)參數(shù)分別是和，用來(lái)執(zhí)行了兩種狀態(tài)的回調(diào)函數(shù)。當(dāng)實(shí)例生成后，用方法來(lái)指定兩種狀態(tài)的回調(diào)函數(shù)。 什么是Promise 官方的解釋：Promise是一個(gè)用來(lái)傳遞異步操作消息的對(duì)象。Promise有三種狀態(tài)，pending（等待中），resolve...

    LMou 評(píng)論0 收藏0

  • JavaScript之手寫Promise

    摘要：如果狀態(tài)是等待態(tài)的話，就往回調(diào)函數(shù)中函數(shù)，比如如下代碼就會(huì)進(jìn)入等待態(tài)的邏輯以上就是簡(jiǎn)單版實(shí)現(xiàn)實(shí)現(xiàn)一個(gè)符合規(guī)范的接下來(lái)大部分代碼都是根據(jù)規(guī)范去實(shí)現(xiàn)的。 為更好的理解， 推薦閱讀Promise/A+ 規(guī)范 實(shí)現(xiàn)一個(gè)簡(jiǎn)易版 Promise 在完成符合 Promise/A+ 規(guī)范的代碼之前，我們可以先來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)易版 Promise，因?yàn)樵诿嬖囍?，如果你能?shí)現(xiàn)出一個(gè)簡(jiǎn)易版的 Promise ...

    stefan 評(píng)論0 收藏0

  • 40行js實(shí)現(xiàn)一個(gè)簡(jiǎn)易Promise

    摘要：最近面試有問(wèn)到的原理，以及實(shí)現(xiàn)的方法。所以自己動(dòng)手實(shí)現(xiàn)了一個(gè)，發(fā)個(gè)文章記錄下。簡(jiǎn)單分析下，實(shí)例對(duì)象有兩個(gè)屬性，一個(gè)是，一個(gè)是。 最近面試有問(wèn)到Promise的原理，以及實(shí)現(xiàn)的方法。所以自己動(dòng)手實(shí)現(xiàn)了一個(gè)，發(fā)個(gè)文章記錄下。簡(jiǎn)單分析下，promise實(shí)例對(duì)象有兩個(gè)屬性，一個(gè)是status，一個(gè)是value。還有一個(gè)then方法。status有3個(gè)狀態(tài)，pending,resolved,re...

    nihao 評(píng)論0 收藏0

  • 超級(jí)易懂的redux-saga原理解析

    摘要：原文地址前言筆者最近在做一些后臺(tái)項(xiàng)目，使用的是，其使用了處理異步數(shù)據(jù)流，本文將對(duì)的原理做一個(gè)簡(jiǎn)單的解讀，并將實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的。函數(shù)的自動(dòng)流程控制在中，是指一些長(zhǎng)時(shí)操作，用函數(shù)表示。 原文地址 前言 筆者最近在做一些后臺(tái)項(xiàng)目，使用的是Ant Design Pro，其使用了redux-saga處理異步數(shù)據(jù)流，本文將對(duì)redux-saga的原理做一個(gè)簡(jiǎn)單的解讀，并將實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的redux...

    wendux 評(píng)論0 收藏0

  • KOA2框架原理解析和實(shí)現(xiàn)

    摘要：實(shí)現(xiàn)的四大模塊上文簡(jiǎn)述了源碼的大體框架結(jié)構(gòu)，接下來(lái)我們來(lái)實(shí)現(xiàn)一個(gè)的框架，筆者認(rèn)為理解和實(shí)現(xiàn)一個(gè)框架需要實(shí)現(xiàn)四個(gè)大模塊，分別是封裝創(chuàng)建類構(gòu)造函數(shù)構(gòu)造對(duì)象中間件機(jī)制和剝洋蔥模型的實(shí)現(xiàn)錯(cuò)誤捕獲和錯(cuò)誤處理下面我們就逐一分析和實(shí)現(xiàn)。 什么是koa框架？ ? ? ? ?koa是一個(gè)基于node實(shí)現(xiàn)的一個(gè)新的web框架，它是由express框架的原班人馬打造的。它的特點(diǎn)是優(yōu)雅、簡(jiǎn)潔、表達(dá)力強(qiáng)、自由度...

    tracymac7 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<