手寫promise實現(xiàn)原理

手寫promise實現(xiàn)原理Promise是JavaScript中處理異步編程的一種方式，其實現(xiàn)原理包括以下幾個關(guān)鍵步驟：

1.Promise的基本結(jié)構(gòu)：Promise是一個對象，包含三個狀態(tài)：pending（進行中）、fulfilled（已成功）和rejected（已失?。?。

```javascript

classPromise{

constructor(executor){

this.state='pending';

this.value=undefined;

this.reason=undefined;

this.onFulfilledCallbacks=[];

this.onRejectedCallbacks=[];

try{

executor(this.resolve.bind(this),this.reject.bind(this));

}catch(error){

this.reject(error);

}

}

resolve(value){

if(this.state==='pending'){

this.state='fulfilled';

this.value=value;

this.onFulfilledCallbacks.forEach(callback=>callback(this.value));

}

}

reject(reason){

if(this.state==='pending'){

this.state='rejected';

this.reason=reason;

this.onRejectedCallbacks.forEach(callback=>callback(this.reason));

}

}

}

```

2.then方法的實現(xiàn)：通過then方法可以為Promise對象綁定成功和失敗的回調(diào)函數(shù)。

```javascript

then(onFulfilled,onRejected){

constpromise2=newPromise((resolve,reject)=>{

if(this.state==='fulfilled'){

setTimeout(()=>{

try{

constx=onFulfilled(this.value);

this.resolvePromise(promise2,x,resolve,reject);

}catch(error){

reject(error);

}

});

}

if(this.state==='rejected'){

setTimeout(()=>{

try{

constx=onRejected(this.reason);

this.resolvePromise(promise2,x,resolve,reject);

}catch(error){

reject(error);

}

});

}

if(this.state==='pending'){

this.onFulfilledCallbacks.push(value=>{

setTimeout(()=>{

try{

constx=onFulfilled(value);

this.resolvePromise(promise2,x,resolve,reject);

}catch(error){

reject(error);

}

});

});

this.onRejectedCallbacks.push(reason=>{

setTimeout(()=>{

try{

constx=onRejected(reason);

this.resolvePromise(promise2,x,resolve,reject);

}catch(error){

reject(error);

}

});

});

}

});

returnpromise2;

}

resolvePromise(promise,x,resolve,reject){

if(promise===x){

reject(newTypeError('Chainingcycledetectedforpromise'));

}

letcalled=false;

if(xinstanceofPromise){

x.then(

value=>{

if(called)return;

called=true;

this.resolvePromise(promise,value,resolve,reject);

},

reason=>{

if(called)return;

called=true;

reject(reason);

}

);

}elseif(typeofx==='object'||typeofx==='function'){

if(x===null){

resolve(x);

}

try{

constthen=x.then;

if(typeofthen==='function'){

then.call(

x,

value=>{

if(called)return;

called=true;

this.resolvePromise(promise,value,resolve,reject);

},

reason=>{

if(called)return;

called=true;

reject(reason);

}

);

}else{

resolve(x);

}

}catch(error){

if(called)return;

called=true;

reject(error);

}

}else{

resolve(x);

}

}

```

3.catch方法的實現(xiàn)：通過catch方法可以捕獲被reject的Promise。

```javascript

catch(onRejected){

returnthis.then(null,onRejected);

}

```

4.finally方法的實現(xiàn)：通過finally方法可以在Promise狀態(tài)變?yōu)槌晒蚴r執(zhí)行指定的回調(diào)函數(shù)。

```javascript

finally(onFinally){

returnthis.then(value=>{

onFinally();

returnvalue;

},reason=>{

onFinally();

throwreason;

});

}

`