從源碼看 Promise 觀點與完成
Promise 是 JS 異步編程中的主要觀點，它較好地處置懲罰了異步使命中回調嵌套的題目。在沒有引入新的言語機制的前提下，這是怎樣完成的呢？上手 Promise 經常見多少艱澀的 API 與觀點，它們又為什麼存在呢？源碼里隱蔽着這些題目的答案。
下文會在引見 Promise 觀點的基礎上，以一步步代碼完成 Promise 的體式格局，剖析 Promise 的完成機制。響應代碼參考來自 PromiseJS 博客 及 You don’t know JS 的多少章節。
Why Promise
（有運用 Promise 履歷的讀者可疏忽本段）
基於 JS 函數一等國民的優秀特徵，JS 中最基礎的異步邏輯平常是以向異步 API 傳入一個函數的體式格局完成的，這個函數里包含了異步完成后的後續營業邏輯。與一般的函數參數差別的是，這類函數需在異步操縱完成時才被挪用，故而稱之為回調函數。以異步 Ajax 查詢為例，基於回調的代碼完成多是如許的：
ajax.get('xxx', data => {
// 在回調函數里獵取到數據，實行後續邏輯
console.log(data)
// ...
})從而，在須要多個異步操縱順次實行時，就須要以回調嵌套的體式格局來完成，比方如許：
ajax.get('xxx', dataA => {
// 第一個要求完成后，依靠其獵取到的數據發送第二個要求
// 發作回調嵌套
ajax.get('yyy' + dataA, dataB => {
console.log(dataB)
// ...
})
})如許一來，在處置懲罰越多的異步邏輯時，就須要越深的回調嵌套，這類編碼情勢的題目主要有以下幾個：
代碼邏輯謄寫遞次與實行遞次不一致，不利於瀏覽與保護。
異步操縱的遞次變動時，須要大規模的代碼重構。
回調函數基礎都是匿名函數，bug 追蹤難題。
回調函數是被第三方庫代碼（如上例中的 ajax ）而非本身的營業代碼所挪用的，形成了 IoC 掌握反轉。
个中看似最可有可無的掌握反轉，現實上是純回調編碼情勢的最大題目。 因為回調函數是被第三方庫挪用的，因而回調中的代碼沒法預期本身被實行時的環境 ，這可以致使：
回調被實行了屢次
回調一次都沒有被實行
回調不是異步實行而是被同步實行
回調被過早或過晚實行
回調中的報錯被第三方庫吞掉
……
經由歷程【防禦性編程】的觀點，上述題目實在都可以經由歷程在回調函數內部舉行種種搜檢來一一防止，但這毫無疑問地會嚴重影響代碼的可讀性與開闢效力。這類異步編碼情勢存在的諸多題目，也就是臭名遠揚的【回調地獄】了。
Promise 較好地處置懲罰了這個題目。以上例中的異步 ajax 邏輯為例，基於 Promise 的情勢是如許的：
// 將 ajax 要求封裝為一個返回 Promise 的函數
function getData (){
return new Promise((resolve, reject) => {
ajax.get('xxx', data => {
resolve(data)
})
})
}
// 挪用該函數並在 Promise 的 then 接口中獵取數據
getData().then(data => {
console.log(data)
})看起來變得煩瑣了？但在上例中須要嵌套回調的狀況，可以改寫成下面的情勢：
function getDataA (){
return new Promise((resolve, reject) => {
ajax.get('xxx', dataA => {
resolve(dataA)
})
})
}
function getDataB (dataA){
return new Promise((resolve, reject) => {
ajax.get('yyy' + dataA, dataB => {
resolve(dataB)
})
})
}
// 運用鏈式挪用解開回調嵌套
getDataA()
.then(dataA => getDataB(dataA))
.then(dataB => console.log(dataB))這就處置懲罰了異步邏輯的回調嵌套題目。那末題目來了，如許文雅的 API 是怎樣完成的呢？
基礎觀點
非常籠統地說，Promise 實在應驗了 CS 的名言【一切題目都可以經由歷程加一層中間層來處置懲罰】。在上面回調嵌套的題目中，Promise 就充當了一个中間層，用來【把回調形成的掌握反轉再反轉歸去】。在運用 Promise 的例子中，掌握流分為了兩個部份：觸發異步前的邏輯經由歷程 new傳入 Promise，而異步操縱完成后的邏輯則傳入 Promise 的 then 接口中。經由歷程這類體式格局，第一方營業和第三方庫的響應邏輯都由 Promise 來挪用，進而在 Promise 中處置懲罰異步編程中可以湧現的種種題目。
這類情勢實在和視察者情勢是靠近的。下面的代碼將 resolve / then 換成了 publish / subscribe ，將經由歷程 new Promise 天生的 Promise 換成了經由歷程 observe 天生的 observable 實例。可以發明，這類挪用一樣做到了回調嵌套的解耦。這就是 Promise 魔法的癥結之一。
// observe 相當於 new Promise
// publish 相當於 resolve
let observable = observe(publish => {
ajax.get('xxx', data => {
// ...
publish(data)
})
})
// subscribe 相當於 then
observable.subscribe(data => {
console.log(data)
// ...
})到這個例子為止，都還沒有觸及 Promise 的源碼完成。在進一步深切前，有必要列出在 Promise 中常見的相干觀點：
resolve / reject : 作為 Promise 暴露給第三方庫的 API 接口，在異步操縱完成時由第三方庫挪用，從而轉變 Promise 的狀況。
fulfilled / rejected / pending : 標識了一個 Promise 當前的狀況。
then / done : 作為 Promise 暴露給第一方代碼的接口，在此傳入【底本直接傳給第三方庫】的回調函數。
這些觀點中風趣的處所在於，標識狀況的變量（如 fulfilled / rejected / pending ）都是形容詞，用於傳入數據的接口（如 resolve 與 reject ）都是動詞，而用於傳入回調函數的接口（如 then 及 done ）則在語義上用於潤飾動詞的副詞。在瀏覽源碼的時刻，除了變量的範例外，其稱號所對應的詞性也能對明白代碼邏輯起到協助，比方：
標識數據的變量與 OO 對象經常使用名詞（ result / data / Promise ）
標識狀況的變量經常使用形容詞（ fulfilled / pending ）
被挪用的函數接口經常使用動詞（ resolve / reject ）
用於傳入函數的參數接口經常使用副詞（如 then / onFulfilled 等，畢竟函數經常使用動詞，而副詞原本就是用來潤飾動詞的）
預熱了 Promise 相干的變量名后，就可以最先完成 Promise 了。下文的行文體式格局既不是按行號逐行引見，也不是按代碼實行遞次往返騰躍，而是根據現實編碼時的步驟一步步地搭建出響應的功用。置信這類體式格局比直接在源碼里堆解釋能更加友愛一些。
狀況機
一個 Promise 可以明白為一個狀況機，響應的 API 接口要麼用於轉變狀況機的狀況，要麼在到達某個狀況時被觸發。因而起首須要完成的，是 Promise 的狀況信息：
const PENDING = 0
const FULFILLED = 1
const REJECTED = 2
function Promise (){
// 存儲該 Promise 的狀況信息
let state = PENDING
// 存儲 FULFILLED 或 REJECTED 時帶來的數據
let value = null
// 存儲 then 或 done 時挪用的勝利或失利回調
var handlers = []
}狀況遷徙
指定狀況機的狀況后，可以完成基礎的狀況遷徙功用，即 fulfill 與 reject 這兩個用於轉變狀況的函數，響應完成也非常簡樸：
const PENDING = 0
const FULFILLED = 1
const REJECTED = 2
function Promise (){
// 存儲該 Promise 的狀況信息
let state = PENDING
// 存儲 FULFILLED 或 REJECTED 時帶來的數據
let value = null
// 存儲 then 或 done 時挪用的勝利或失利回調
let handlers = []
function fulfill (result){
state = FULFILLED
value = result
}
function reject (error){
state = REJECTED
value = error
}
}在這兩種底層的狀況遷徙基礎上，我們須要完成一種更高等的狀況遷徙體式格局，這就是 resolve了：
const PENDING = 0
const FULFILLED = 1
const REJECTED = 2
function Promise (){
// 存儲該 Promise 的狀況信息
let state = PENDING
// 存儲 FULFILLED 或 REJECTED 時帶來的數據
let value = null
// 存儲 then 或 done 時挪用的勝利或失利回調
let handlers = []
function fulfill (result){
state = FULFILLED
value = result
}
function reject (error){
state = REJECTED
value = error
}
function resolve (result){
try {
let then = getThen(result)
if (then) {
// 遞歸 resolve 待剖析的 Promise
doResolve(then.bind(result), resolve, reject)
return
}
fulfill(result)
} catch (e) {
reject(e)
}
}
}resolve 既可以接收一個 Promise，也可以接收一個基礎範例。當 resolve 一個 Promise 時，就運用 doResolve 輔佐函數來實行這個 Promise 並守候其完成。經由歷程暴露 resolve 而隱蔽底層的 fulfill 接口，從而保證了一個 Promise 肯定不會被另一個 Promise 所 fulfill 。在這個歷程當中所用到的輔佐函數以下：
/**
* 搜檢一個值是不是為 Promise
* 若為 Promise 則返回該 Promise 的 then 要領
*
* @param {Promise|Any} value
* @return {Function|Null}
*/
function getThen (value){
let t = typeof value
if (value && (t === 'object' || t === 'function')) {
const then = value.then
// 可以須要更龐雜的 thenable 推斷
if (typeof then === 'function') return then
}
return null
}
/**
* 傳入一個需被 resolve 的函數，該函數可以存在不確定行動
* 確保 onFulfilled 與 onRejected 只會被挪用一次
* 在此不保證該函數肯定會被異步實行
*
* @param {Function} fn 不能信託的回調函數
* @param {Function} onFulfilled
* @param {Function} onRejected
*/
function doResolve (fn, onFulfilled, onRejected){
let done = false
try {
fn(function (value){
if (done) return
done = true
// 實行由 resolve 傳入的 resolve 回調
onFulfilled(value)
}, function (reason){
if (done) return
done = true
onRejected(reason)
})
} catch (ex) {
if (done) return
done = true
onRejected(ex)
}
}resolve 接口
在完全完成了內部狀況機的基礎上，還須要向用戶暴露用於傳入第一方代碼的 new Promise接口，及傳入異步操縱回調的 done / then 接口。下面從 resolve 一個 Promise 最先：
const PENDING = 0
const FULFILLED = 1
const REJECTED = 2
function Promise (fn){
// 存儲該 Promise 的狀況信息
let state = PENDING
// 存儲 FULFILLED 或 REJECTED 時帶來的數據
let value = null
// 存儲 then 或 done 時挪用的勝利或失利回調
let handlers = []
function fulfill (result){
state = FULFILLED
value = result
}
function reject (error){
state = REJECTED
value = error
}
function resolve (result){
try {
let then = getThen(result)
if (then) {
// 遞歸 resolve 待剖析的 Promise
doResolve(then.bind(result), resolve, reject)
return
}
fulfill(result)
} catch (e) {
reject(e)
}
}
doResolve(fn, resolve, reject)
}可以發明這裏重用了 doResolve 以實行不被信託的 fn 函數。這個 fn 函數可以屢次挪用 resolve 和 reject 接口，以至拋出非常，但 Promise 中對其舉行了限定，保證每一個 Promise 只能被 resolve 一次，且在 resolve 后不再發作狀況轉移。
視察者 done 接口
到此為止已完成了一個完全的狀況機，但仍然沒有暴露出一個適宜的要領來視察其狀況的變動。我們的最終目標是完成 then 接口，但因為完成 done 接口的語義要輕易很多，因而可起首完成 done 。
下面的例子中要完成的是 promise.done(onFulfilled, onRejected) 接口，使得：
onFulfilled 與 onRejected 兩者只要一個被挪用。
該接口只會被挪用一次。
該接口老是被異步實行。
挪用 done 的實行機遇與挪用時 Promise 是不是已 resolved 無關。
const PENDING = 0
const FULFILLED = 1
const REJECTED = 2
function Promise (fn){
// 存儲該 Promise 的狀況信息
let state = PENDING
// 存儲 FULFILLED 或 REJECTED 時帶來的數據
let value = null
// 存儲 then 或 done 時挪用的勝利或失利回調
let handlers = []
function fulfill (result){
state = FULFILLED
handlers.forEach(handle)
handlers = null
}
function reject (error){
state = REJECTED
value = error
handlers.forEach(handle)
handlers = null
}
function resolve (result){
try {
let then = getThen(result)
if (then) {
// 遞歸 resolve 待剖析的 Promise
doResolve(then.bind(result), resolve, reject)
return
}
fulfill(result)
} catch (e) {
reject(e)
}
}
// 保證 done 中回調的實行
function handle (handler){
if (state === PENDING) {
handlers.push(handler)
} else {
if (state === FULFILLED &&
typeof handler.onFulfilled === 'function') {
handler.onFulfilled(value)
}
if (state === REJECTED &&
typeof handler.onRejected === 'function') {
handler.onRejected(value)
}
}
}
this.done = function (onFulfilled, onRejected){
// 保證 done 老是異步實行
setTimeout(function (){
handle({
onFulfilled: onFulfilled,
onRejected: onRejected
})
}, 0)
}
doResolve(fn, resolve, reject)
}從而在 Promise 的狀況遷徙至 resolved 或 rejected 時，一切經由歷程 done 註冊的視察者 handler 都能被實行。而且這個操縱老是在下一個 tick 異步實行的。
視察者 then 要領
在完成了 done 要領的基礎上，就可以完成 then 要領了。它們沒有實質的區分，但 then 可以返回一個新的 Promise：
this.then = function (onFulfilled, onRejected){
const _this = this
return new Promise(function (resolve, reject){
return _this.done(function (result){
if (typeof onFulfilled === 'function') {
try {
return resolve(onFulfilled(result))
} catch (ex) {
return reject(ex)
}
} else return resolve(result)
}, function (error){
if (typeof onRejected === 'function') {
try {
return resolve(onRejected(error))
} catch (ex) {
return reject(ex)
}
} else return reject(error)
})
})
}末了梳理一下典範場景下 Promise 的實行流程。以一個 ajax 要求的異步場景為例，全部異步邏輯分為兩部份：挪用 ajax 庫的代碼及異步操縱完成時的代碼。前者被放入 Promise 的組織函數中，由 doResolve 要領實行，在這部份營業邏輯經由歷程挪用 resolve 與 reject 接口，在異步操縱完成時轉變 Promise 的狀況，從而挪用後者，即挪用 Promise 中經由歷程 then 接口傳入的 onFulfilled 與 onRejected 後續營業邏輯代碼。這個歷程當中， doResolve 對第三方 ajax 庫的種種非常行動（屢次挪用回調或拋出非常）做了限定，而 then 下隱蔽的 done 則封裝了 handle 接口，保證了多個經由歷程 then 傳入的 handler 老是異步實行，並能取得適宜的返回效果。因為then 中的代碼老是異步實行並返回了一個新的 Promise，因而可以經由歷程鏈式挪用的體式格局來串連多個 then 要領，從而完成異步操縱的鏈式挪用。
總結
瀏覽了 Promise 的代碼完成后可以發明，它的魔法來自於將【函數一等國民】和【遞歸】的連繫。一個 resolve 假如取得的效果照樣一個 Promise，那末就將遞歸地繼承 resolve 這個 Promise。同時，Promise 的輔佐函數中處置懲罰了諸多異步編程時的常見題目，如回調的屢次挪用及非常處置懲罰等。
引見 Promise 時不少較為艱澀的 API 實在也來自於對 Promise 編碼完成時的觸及的多少底層功用。比方， fulfilled 這個觀點就被封裝在了 resolve 下，而 done 要領則是 then 要領的依靠等。這些觀點在 Promise 的演變中被封裝在了通用的 API 下，只要在瀏覽源碼時才會用到。Promise 的 API 設想也是簡約的，其接口定名和英語的詞性也有相當大的聯絡，這也有利於明白代碼完成的響應功用。
除了上文中從狀況機的角度明白 Promise 之外，實在還可以從函數式編程的角度來明白這個情勢。可以將 Promise 看作一個封裝了異步數據的 Monad，其 then 接口就相當於這個 Monad 的map 要領。如許一來，Promise 也可以明白為一個特別的對象，這個對象【經由歷程一個函數獵取數據，並經由歷程另一個函數來操縱數據】，用戶並不須要體貼个中潛伏的異步風險，只須要供應響應的函數給 Promise API 即可（這睜開又是一篇長文了）。
願望本文對 Promise 的剖析對明白異步編程有所協助
