十幾行代碼教你實(shí)現(xiàn)一個(gè)最簡版的promise

tracymac7 發(fā)布于2019-08-29 12:45 / 2771人閱讀

摘要：最近研究了一下的實(shí)現(xiàn)，這篇文章使用了十幾行代碼實(shí)現(xiàn)了一個(gè)簡單的以便幫助讀者對(duì)有更深的了解。另外一個(gè)有三種狀態(tài)。所以我們有以下的代碼然后我們實(shí)現(xiàn)函數(shù)每次函數(shù)的執(zhí)行會(huì)返回一個(gè)新的。因?yàn)檫@行代碼是異步執(zhí)行的，而當(dāng)中的時(shí)，這行代碼不應(yīng)該執(zhí)行。

最近研究了一下promise的實(shí)現(xiàn)，這篇文章使用了十幾行代碼實(shí)現(xiàn)了一個(gè)簡單的promise；以便幫助讀者對(duì)promise"有更深的了解。本篇文章實(shí)現(xiàn)的promise，遵循規(guī)范是 Promises/A+。

閱讀本篇文章時(shí)，已經(jīng)假定你會(huì)promise的基本使用和一些簡單的es6語法；如果你還沒掌握promise的基本使用，請(qǐng)學(xué)習(xí)完畢后再來。推薦可以看《promise迷你書》、《你不知道的js》及阮一峰老師的《ECMAScript 6 入門》。

promise的核心實(shí)現(xiàn)

首先，我們看一下一個(gè)promise的基本用法：

var p = new MyPromise((resolve) => {
    setTimeout(() => {
        resolve(20)
    }, 300)
})
p.then( (msg) => console.log(msg) );

MyPromise是一個(gè)構(gòu)造函數(shù)，這個(gè)構(gòu)造函數(shù)會(huì)被傳遞一個(gè)函數(shù)；函數(shù)中有兩個(gè)參數(shù)，是兩個(gè)函數(shù)resolve,reject。另外一個(gè)promise有三種狀態(tài)PENDING、RESOLVED、REJECTED。所以我們有以下的代碼：

const PENDING = 0;
const RESOLVED = 1;
const REJECTED = 2;  
function MyPromise(func){
    let state = PENDING;
    let value = null;
    function resolve(newValue){
        value = newValue;
        state = RESOLVED;
    }
    function reject(err){
        value = err;
        state = REJECTED;
    }
    func(resolve, reject);
}

然后我們實(shí)現(xiàn)then函數(shù),每次then函數(shù)的執(zhí)行會(huì)返回一個(gè)新的promise。

this.then = function(onFullFill, onReject){
    return new MyPromise((resolve, reject) => {
        
    })
}

傳遞給then函數(shù)onFullFill函數(shù)返回值，會(huì)傳遞給第二個(gè)then中onFullFill中。即要能這樣使用p.then( (msg) => msg ).then( data => console.log(data) );
這行代碼實(shí)際是什么呢？讓我們變換一下上面的代碼：

p
  .then( function fn1(msg){
      return msg;
  })
  .then( function fn2(data){
      console.log(data);
  })
//以上代碼的實(shí)質(zhì)
fn2(fn1(msg))

我們要在then函數(shù)里面如何執(zhí)行resolve函數(shù)呢？首先resolve函數(shù)是必須執(zhí)行的，因?yàn)樗淖僷.then()生成的promise的狀態(tài)；其次，resolve這個(gè)函數(shù)還要能接受到onFullFill執(zhí)行的值；以便傳遞給下一個(gè)回調(diào)函數(shù)。你可能想到了這種方案:

const PENDING = 0;
const RESOLVED = 1;
const REJECTED = 2;  
function MyPromise(func){
    let state = PENDING;
    let value = null;
    function resolve(newValue){
        value = newValue;
        state = RESOLVED;
    }
    function reject(err){
        value = err;
        state = REJECTED;
    }
    this.then = function(onFullFill, onReject){
        return new MyPromise((resolve, reject) => {
            resolve(onFullFill(value));
        })
    }
    func(resolve, reject);
}

var p = new MyPromise((resolve) => {
    setTimeout(() => {
        resolve(20)
    }, 300)
})

p.then( (msg) => msg ).then( data => console.log(data) );

但是當(dāng)你把以上代碼拼湊在一起，執(zhí)行；打印出來的是null。why？

因?yàn)?b>setTimeout(fn, 300)這行代碼是異步執(zhí)行的，而當(dāng)promise中的state!==RESOLVED時(shí)，這行代碼resolve(onFullFill(value))；不應(yīng)該執(zhí)行。所以我們有了以下的優(yōu)化：

function MyPromise(func){
    let state = PENDING;
    let value = null;
    let handlers = [];
    function resolve(newValue){
        value = newValue;
        state = RESOLVED;
        handlers.forEach( handler => handle(handler));
    }
    function reject(err){
        value = err;
        state = REJECTED;
    }
    function handle(handler){
        if(state === PENDING){
            handlers.push(handler);
            return;
        }
        handler.resolve(handler.onFullFill(value));
    }
    this.then = function(onFullFill, onReject){
        return new MyPromise((resolve, reject) => {
            handle({
                resolve: resolve,
                onFullFill: onFullFill
            })
        })
    }
    func(resolve, reject);
}

這樣在then函數(shù)里和resolve函數(shù)里我們都會(huì)執(zhí)行handle函數(shù)，但只有在resolve函數(shù)執(zhí)行后才會(huì)執(zhí)行handler.resolve(handler.onFullFill(value))。
現(xiàn)在還有一個(gè)問題，如果Promise中封裝的不是異步操作，而是同步操作；那么resolve函數(shù)就會(huì)比then函數(shù)更先執(zhí)行。

var p = new MyPromise((resolve, reject) => {
    resolve("同步操作")
})
p.then(console.log)

所以我們執(zhí)行resolve中的回調(diào)的時(shí)候，應(yīng)該異步執(zhí)行：

function resolve(newValue){
    value = newValue;
    state = RESOLVED;
    setTimeout( () => {
        handlers.forEach( handler => handle(handler));
    }, 0)
}

同時(shí)，由于then函數(shù)中可以接收一個(gè)promise；我們需要對(duì)這種情況進(jìn)行處理：

function resolve = (newValue) => {
  if(newValue && (typeof newValue === "object" || typeonewValue === "function") {
    let then = newValue.then
    if(typeof then === "function"){
      return then.call(newValue, resolve)
    }
  
  state = FULFILLED;
  value = newValue;
  setTimeout(() => {
    handlers.forEach(handler => {
      handle(handler)
    })
  }, 0)
}

至此，我們已經(jīng)完成了一個(gè)基本promise的實(shí)現(xiàn)。