手寫(xiě)一個(gè)Promise

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6 將其寫(xiě)進(jìn)了語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了Promise對(duì)象。

首先我們來(lái)看一下傳統(tǒng)異步編程中常用的回調(diào)函數(shù)寫(xiě)法


image.png

如圖所示，假如現(xiàn)在有這樣一個(gè)需求，點(diǎn)擊開(kāi)始按鈕時(shí),將綠色div元素移動(dòng)到A位置再移動(dòng)到B位置，再移動(dòng)到c位置。。。我們可能寫(xiě)出這樣的代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
   #el {
     width: 50px;
     height: 50px;
     background: green;
     transition: all 1s;
     color: white;
     line-height: 50px;
     text-align: center;
     font-size: 30px;
   }
 </style>
</head>
<body>
 <div id="el">div</div>
 <button id="btn">開(kāi)始</button>
 <script>
 // 動(dòng)畫(huà)

function moveTo(el, x, y, cb) {
   el.style.transform = `translate(${x}px, ${y}px)`;
   setTimeout(function() {
       cb && cb();
   }, 1000);
}

let el = document.querySelector('div');

document.querySelector('button').addEventListener('click', e => {
   moveTo(el, 100, 100, function() {
       moveTo(el, 200, 200, function() {
           moveTo(el, 30, 20, function() {
               moveTo(el, 100, 300, function() {
                   moveTo(el, 130,20, function() {
                       moveTo(el, 0, 0, function() {
                           console.log('移動(dòng)結(jié)束!');
                       });
                   });
               });
           });
       });
   });
});

moveTo函數(shù)接收四個(gè)參數(shù)，分別是要移動(dòng)的元素，X坐標(biāo)距離，Y坐標(biāo)距離，以及回調(diào)函數(shù)，里面設(shè)置了一個(gè)定時(shí)器，1s后執(zhí)行回調(diào)函數(shù)。
可以看見(jiàn)，這種寫(xiě)法嵌套層次太多，難以維護(hù)。下面我們看看用promise的方式如何實(shí)現(xiàn)相同的功能

function moveTo(el, x, y) {
    return new Promise(resolve => {
        el.style.transform = `translate(${x}px, ${y}px)`;
        setTimeout(function() {
            resolve();
        }, 1000);
    });
}
let el = document.querySelector('div');
document.querySelector('button').addEventListener('click', e => {
    moveTo(el, 100, 100)
        .then(function() {
            return moveTo(el, 200, 200);
        })
        .then(function() {
            return moveTo(el, 300, 300);
        })
        .then(function() {
            return moveTo(el, 400, 400);
        })
        .then(function() {
            return moveTo(el, 0, 0);
        });
});

Promise使用了鏈?zhǔn)秸{(diào)用的方法，結(jié)構(gòu)明顯清晰許多。
此時(shí)，moveTo函數(shù)內(nèi)部返回了一個(gè)Promise實(shí)例，Promise內(nèi)部同樣采用了一個(gè)定時(shí)器來(lái)模擬異步過(guò)程的時(shí)間，一秒后執(zhí)行resolve將其狀態(tài)變?yōu)槌晒B(tài)。Promise的用法相信大家都很熟悉，我就不多贅述了，下面我們開(kāi)始自己手寫(xiě)一個(gè)簡(jiǎn)易版的Promise構(gòu)造函數(shù)。

首先我們創(chuàng)建一個(gè)test.js文件，再引入我們自己寫(xiě)的promise.js

//promsie.js
function Promise(){
}
module.exports  = Promise
-------
//test.js
let Promise = require('./promise')
let promise = new Promise((resolve,reject)=>{

})

我們都知道Promise的參數(shù)是一個(gè)立即執(zhí)行的函數(shù)，我們把他稱(chēng)為excutor。同時(shí)這個(gè)函數(shù)有兩個(gè)參數(shù)，也是兩個(gè)函數(shù)，我們一般稱(chēng)為resolve和 reject。
執(zhí)行這兩個(gè)函數(shù)可分別將promise的狀態(tài)改為成功態(tài)和失敗態(tài)。
那么首先我們?cè)?code>Promise函數(shù)里面初始化其實(shí)例上的狀態(tài)status以及成功的值value以及失敗的值reason,執(zhí)行excutor函數(shù),為了確保執(zhí)行resolve和 reject的時(shí)候?qū)鱽?lái)的值正確的賦值給當(dāng)前實(shí)例，我們需要聲明一個(gè)變量保存this,具體代碼如下

function Promise(excutor){
    //pending 等待態(tài) fulfilled 成功態(tài) 失敗態(tài) rejected
    this.status = 'pending'
    this.value = undefined
    this.reason = undefined
    let self = this

    function resolve(value){
        self.value = value
        //只有在等待態(tài)的時(shí)候才能更改
        if(self.status === 'pending'){  
            self.status ='fulfilled'
        }
        console.log(this)
    }
    function reject(reason){
        self.reason = reason
        if(self.status === 'pending'){
            self.status ='rejected'
        }
    }

   try{
        excutor(resolve,reject)
    }catch(e){
        reject(e)
    }
}

Promise實(shí)例上面有一個(gè)then方法，其接受兩個(gè)函數(shù)onfulfilled和onrejected

Promise.prototype.then = function(onfulfilled,onrejected){
        let self = this
       //如果狀態(tài)為成功，調(diào)用第一個(gè)函數(shù) 也就是onfulfilled
        if(self.status === 'fulfilled'){
            onfulfilled(self.value)
        }
        if(self.status === 'rejected'){
            onrejected(self.reason)
        }
}
--------
let promise = new Promise((resolve,reject)=>{
    // setTimeout(()=>{
            resolve('我是成功')
    // },1000)
})
console.log(222)
promise.then((val)=>{
    console.log(val)
})

-------
node test.js
222
我是成功

執(zhí)行test.js 成功打印出了我是成功。但是這是因?yàn)槲覀兞⒓磮?zhí)行了resolve，如果我們過(guò)段時(shí)間再執(zhí)行resolve，就不會(huì)打印了，所以我們需要在then里面對(duì)pending做處理，我們先在Promise里面先定義兩個(gè)數(shù)組用于存放成功回調(diào)和失敗回調(diào)，再在then里面將回調(diào)函數(shù)push進(jìn)去，什么時(shí)候狀態(tài)變了再去調(diào)用，

//promsie.js
    self.onResolveCallbacks = []
    self.onRejectedCallbacks = []

    function resolve(value){
        self.value = value
        //只有在等待態(tài)的時(shí)候才能更改
        if(self.status === 'pending'){  
            self.status = 'fulfilled'
            self.onResolveCallbacks.forEach(fn=>fn())
        }
    }
    function reject(reason){
        self.reason = reason
        if(self.status === 'pending'){
            self.status = 'rejected'
            self.onRejectedCallbacks.forEach(fn=>fn())
        }
    }
-------
//then
 if(self.status === 'pending'){
            self.onResolveCallbacks.push(function(){
                onfulfilled(self.value)
            })
            self.onRejectedCallbacks.push(function(){
                onrejected(self.reason)
            })
        }

接下來(lái)我們來(lái)實(shí)現(xiàn)Promise的鏈?zhǔn)秸{(diào)用，也就是promise.then().then()....,我們知道then方法如果返回一個(gè)promise 我們就會(huì)根據(jù)這個(gè)promise得狀態(tài)執(zhí)行成功或失敗函數(shù)，如果返回的是一個(gè)普通值，執(zhí)行下一個(gè)then中的成功函數(shù)。
所以我們需要在then方法里面return一個(gè)新的 promise實(shí)例，再寫(xiě)一個(gè)resolvePromise方法處理resolve或者reject的返回值

function resolvePromise(promise2,x,resolve,reject){
    //對(duì)x進(jìn)行判斷 如果是一個(gè)普通值 直接resolve
    if(promise2 === x){
        return reject(new TypeError('不能return自己'))
    }
    if(x!==null && (typeof x === 'object' || typeof x === 'function')){
        try{
            let then = x.then
            if(typeof then === 'function'){
                then.call(x,y=>{
                    resolve(y)
                },r=>{
                    reject(r)
                })
            }else{
                resolve(x)
            }

        }catch(e){

        }
    }else{
        resolve(x)
    }
}

Promise.prototype.then = function(onfulfilled,onrejected){
        let self = this
        let promise2 = new Promise(function(resolve,reject){
            if(self.status === 'fulfilled'){
   //用定時(shí)器保證能拿到promise2
                setTimeout(()=>{
                    try{
                        let x =  onfulfilled(self.value)
                        resolvePromise(promise2,x,resolve,reject)                         

                    }catch(e){
                            reject(e)
                    }
                })
            }
            if(self.status === 'rejected'){
                setTimeout(()=>{
                    try{
                        let x =  onrejected(self.reason)
                        resolvePromise(promise2,x,resolve,reject)                         
                    }catch(e){
                        reject(e)
                    }
                })
            }
            if(self.status === 'pending'){
                self.onResolveCallbacks.push(function(){
                    setTimeout(()=>{
                        try{
                            let x =  onfulfilled(self.value)
                            resolvePromise(promise2,x,resolve,reject)                         
    
                        }catch(e){
                            reject(e)
                        }
                    })
                })
                self.onRejectedCallbacks.push(function(){
                    setTimeout(()=>{
                        try{
                            let x =  onrejected(self.reason)
                            resolvePromise(promise2,x,resolve,reject)                         
                        }catch(e){
                            reject(e)
                            
                        }
                    })
                })
            }
        })
        return promise2
     
}

這樣我們就實(shí)現(xiàn)了鏈?zhǔn)秸{(diào)用,暫時(shí)先寫(xiě)到這里。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容