js手寫方法之 Promise

promise與async/await是es6中常用的非同步操作方法，為了深刻理解promise的用法，解讀原始碼是乙個很好的方案。其核心方法是promise建構函式，以及.then方法，其他靜態方法都是在此基礎之上封裝的

為了方便理解，以下**經過了適當刪減

// promise狀態常量值

// 狀態還未變化
const
pending=0
// 成功
const
fullfilled=1
// 失敗
const
rejected=2
function
mypromise
(executor))}
}const
reject
=(error)
=>)}
}try
) 中的function
// 從這裡也能看出 excutor 是同步執行
excutor
(resolve, reject)
}catch(e
)}

// 構造器建好後，新增原型鏈方法

mypromise.prototype =
/** * promise支援.then().then()這種鏈式呼叫，所以then()的返回值也應是乙個promise物件
* 由於promise存在前面的then執行成功，後面的then執行失敗的情況
* 所以不能返回當前狀態已經固定的this，而是返回乙個新的promise
*/let p2 =
newpromise
((resolve, reject)
=>
else
// 對result進行解析，直到最終執行resolve(obj)或reject(err)
// obj為result最後返回的那個物件
resolvepromise
(result, resolve, reject)}if
(this
.state ===
rejected
)else
// 對error進行解析，直到最終執行reject(err)
resolvepromise
(error, resolve, reject)}if
(this
.state ===
pending
)else
resolvepromise
(result, resolve, reject)})
this
.onrejectedcallbacks.
push((
)=>
else
resolvepromise
(error, resolve, reject)})
}})return p2
}}

/**

* 判斷乙個物件是否為promise物件
* 判斷他是否擁有then方法
*/function
ispromise
(obj)
}return
false
}

// 這個方法的目的，是解析result中的data

// 並最終執行外層p2的resolve或reject方法
function
resolvepromise
(result, resolve, reject)
, j=>{})
then.
call
(result, r =>
, j =>)}
catch(e
)}else
}

mypromise.prototype.catch(errorfn)

mypromise.prototype.

catch
=function
(errorfn)

mypromise.

resolve
=function
(data)
)}

mypromise.

reject
=function
(error)
)}

/**

* 所有promise執行成功後，返回整個列表
* 如果有失敗的，返回最先失敗的結果
*/mypromise.
all=
function
(promiseobj =
)}).
catch
(err =>)}
else
}// 如果沒有非同步資料
if(index ===0)
})}

/**

* 誰先執行完成返回誰，不管是成功還是失敗
*/mypromise.
race
=function
(promiseobj=
)else}}
)}

手寫promise封裝ajax

其實，axios本身就是基於promise進行封裝的，我們之所以進行二次封裝，主要是為了能夠對錯誤資訊進行乙個集中的處理，根據不同的錯誤資訊，需要給使用者不同的提示，以便於給使用者乙個良好的操作體驗。封裝方法有很多種，基於class類的，基於建構函式的，也可以直接封裝乙個函式。具體按照個人習慣，最主...

手寫Promise實現過程

手寫promise實現過程 定義好mypromise的三種狀態，用三個常量來接收 const pending pending 等待 const fulfilled fulfilled 成功 const rejected rejected 失敗 class mypromise catch e mypr...

手寫乙個Promise

js物件導向 在js中一切皆物件，但js並不是一種真正的物件導向 oop 的語言，因為它缺少類 class 的概念。雖然es6引入了class和extends，使我們能夠輕易地實現類和繼承。但js並不存在真實的類，js的類是通過函式以及原型鏈機制模擬的，本小節的就來 如何在es5環境下利用函式和原型...