本篇文章主要在于探究
Promise
的實現原理,帶領大家一步一步實現一個Promise
, 不對其用法做說明,如果讀者還對Promise的用法不了解,可以查看阮一峰老師的ES6 Promise教程。
接下來,帶你一步一步實現一個 Promise
1. Promise
基本結構
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('FULFILLED')
}, 1000)
})
構造函數
Promise
必須接受一個函數作為參數,我們稱該函數為handle
,handle
又包含resolve
和reject
兩個參數,它們是兩個函數。
定義一個判斷一個變量是否為函數的方法,后面會用到
// 判斷變量否為function
const isFunction = variable => typeof variable === 'function'
首先,我們定義一個名為 MyPromise
的 Class
,它接受一個函數 handle
作為參數
class MyPromise {
constructor (handle) {
if (!isFunction(handle)) {
throw new Error('MyPromise must accept a function as a parameter')
}
}
}
再往下看
2. Promise
狀態和值
Promise
對象存在以下三種狀態:
Pending(進行中)
Fulfilled(已成功)
Rejected(已失敗)
狀態只能由
Pending
變為Fulfilled
或由Pending
變為Rejected
,且狀態改變之后不會在發生變化,會一直保持這個狀態。
Promise
的值是指狀態改變時傳遞給回調函數的值
上文中
handle
函數包含resolve
和reject
兩個參數,它們是兩個函數,可以用于改變Promise
的狀態和傳入Promise
的值
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('FULFILLED')
}, 1000)
})
這里 resolve
傳入的 "FULFILLED"
就是 Promise
的值
resolve
和 reject
-
resolve
: 將Promise對象的狀態從Pending(進行中)
變為Fulfilled(已成功)
-
reject
: 將Promise對象的狀態從Pending(進行中)
變為Rejected(已失敗)
-
resolve
和reject
都可以傳入任意類型的值作為實參,表示Promise
對象成功(Fulfilled)
和失敗(Rejected)
的值
了解了 Promise
的狀態和值,接下來,我們為 MyPromise
添加狀態屬性和值
首先定義三個常量,用于標記Promise對象的三種狀態
// 定義Promise的三種狀態常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
再為
MyPromise
添加狀態和值,并添加狀態改變的執行邏輯
class MyPromise {
constructor (handle) {
if (!isFunction(handle)) {
throw new Error('MyPromise must accept a function as a parameter')
}
// 添加狀態
this._status = PENDING
// 添加狀態
this._value = undefined
// 執行handle
try {
handle(this._resolve.bind(this), this._reject.bind(this))
} catch (err) {
this._reject(err)
}
}
// 添加resovle時執行的函數
_resolve (val) {
if (this._status !== PENDING) return
this._status = FULFILLED
this._value = val
}
// 添加reject時執行的函數
_reject (err) {
if (this._status !== PENDING) return
this._status = REJECTED
this._value = err
}
}
這樣就實現了 Promise
狀態和值的改變。下面說一說 Promise
的核心: then
方法
3. Promise
的 then
方法
Promise
對象的 then
方法接受兩個參數:
promise.then(onFulfilled, onRejected)
參數可選
onFulfilled
和 onRejected
都是可選參數。
- 如果
onFulfilled
或onRejected
不是函數,其必須被忽略
onFulfilled
特性
? ? 如果 onFulfilled
是函數:
- 當
promise
狀態變為成功時必須被調用,其第一個參數為promise
成功狀態傳入的值(resolve
執行時傳入的值) - 在
promise
狀態改變前其不可被調用 - 其調用次數不可超過一次
onRejected
特性
? ? 如果 onRejected
是函數:
- 當
promise
狀態變為失敗時必須被調用,其第一個參數為promise
失敗狀態傳入的值(reject
執行時傳入的值) - 在
promise
狀態改變前其不可被調用 - 其調用次數不可超過一次
多次調用
? ? then
方法可以被同一個 promise
對象調用多次
- 當
promise
成功狀態時,所有onFulfilled
需按照其注冊順序依次回調 - 當
promise
失敗狀態時,所有onRejected
需按照其注冊順序依次回調
返回
then
方法必須返回一個新的 promise
對象
promise2 = promise1.then(onFulfilled, onRejected);
因此 promise
支持鏈式調用
promise1.then(onFulfilled1, onRejected1).then(onFulfilled2, onRejected2);
這里涉及到 Promise
的執行規則,包括“值的傳遞”和“錯誤捕獲”機制:
1、如果 onFulfilled
或者 onRejected
返回一個值 x
,則運行下面的 Promise
解決過程:[[Resolve]](promise2, x)
- 若
x
不為Promise
,則使x
直接作為新返回的Promise
對象的值, 即新的onFulfilled
或者onRejected
函數的參數. - 若
x
為Promise
,這時后一個回調函數,就會等待該Promise
對象(即x
)的狀態發生變化,才會被調用,并且新的Promise
狀態和x
的狀態相同。
下面的例子用于幫助理解:
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
promise2 = promise1.then(res => {
// 返回一個普通值
return '這里返回一個普通值'
})
promise2.then(res => {
console.log(res) //1秒后打印出:這里返回一個普通值
})
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
promise2 = promise1.then(res => {
// 返回一個Promise對象
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('這里返回一個Promise')
}, 2000)
})
})
promise2.then(res => {
console.log(res) //3秒后打印出:這里返回一個Promise
})
2、如果 onFulfilled
或者onRejected
拋出一個異常 e
,則 promise2
必須變為失敗(Rejected)
,并返回失敗的值 e
,例如:
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
}, 1000)
})
promise2 = promise1.then(res => {
throw new Error('這里拋出一個異常e')
})
promise2.then(res => {
console.log(res)
}, err => {
console.log(err) //1秒后打印出:這里拋出一個異常e
})
3、如果onFulfilled
不是函數且 promise1
狀態為成功(Fulfilled)
, promise2
必須變為成功(Fulfilled)
并返回 promise1
成功的值,例如:
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
}, 1000)
})
promise2 = promise1.then('這里的onFulfilled本來是一個函數,但現在不是')
promise2.then(res => {
console.log(res) // 1秒后打印出:success
}, err => {
console.log(err)
})
4、如果 onRejected
不是函數且 promise1
狀態為失敗(Rejected)
,promise2
必須變為失敗(Rejected)
并返回 promise1
失敗的值,例如:
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail')
}, 1000)
})
promise2 = promise1.then(res => res, '這里的onRejected本來是一個函數,但現在不是')
promise2.then(res => {
console.log(res)
}, err => {
console.log(err) // 1秒后打印出:fail
})
根據上面的規則,我們來為 完善 MyPromise
修改 constructor
: 增加執行隊列
由于 then
方法支持多次調用,我們可以維護兩個數組,將每次 then
方法注冊時的回調函數添加到數組中,等待執行
constructor (handle) {
if (!isFunction(handle)) {
throw new Error('MyPromise must accept a function as a parameter')
}
// 添加狀態
this._status = PENDING
// 添加狀態
this._value = undefined
// 添加成功回調函數隊列
this._fulfilledQueues = []
// 添加失敗回調函數隊列
this._rejectedQueues = []
// 執行handle
try {
handle(this._resolve.bind(this), this._reject.bind(this))
} catch (err) {
this._reject(err)
}
}
添加then方法
首先,then
返回一個新的 Promise
對象,并且需要將回調函數加入到執行隊列中
// 添加then方法
then (onFulfilled, onRejected) {
const { _value, _status } = this
switch (_status) {
// 當狀態為pending時,將then方法回調函數加入執行隊列等待執行
case PENDING:
this._fulfilledQueues.push(onFulfilled)
this._rejectedQueues.push(onRejected)
break
// 當狀態已經改變時,立即執行對應的回調函數
case FULFILLED:
onFulfilled(_value)
break
case REJECTED:
onRejected(_value)
break
}
// 返回一個新的Promise對象
return new MyPromise((onFulfilledNext, onRejectedNext) => {
})
}
那返回的新的 Promise
對象什么時候改變狀態?改變為哪種狀態呢?
根據上文中 then
方法的規則,我們知道返回的新的 Promise
對象的狀態依賴于當前 then
方法回調函數執行的情況以及返回值,例如 then
的參數是否為一個函數、回調函數執行是否出錯、返回值是否為 Promise
對象。
我們來進一步完善 then
方法:
// 添加then方法
then (onFulfilled, onRejected) {
const { _value, _status } = this
// 返回一個新的Promise對象
return new MyPromise((onFulfilledNext, onRejectedNext) => {
// 封裝一個成功時執行的函數
let fulfilled = value => {
try {
if (!isFunction(onFulfilled)) {
onFulfilledNext(value)
} else {
let res = onFulfilled(value);
if (res instanceof MyPromise) {
// 如果當前回調函數返回MyPromise對象,必須等待其狀態改變后在執行下一個回調
res.then(onFulfilledNext, onRejectedNext)
} else {
//否則會將返回結果直接作為參數,傳入下一個then的回調函數,并立即執行下一個then的回調函數
onFulfilledNext(res)
}
}
} catch (err) {
// 如果函數執行出錯,新的Promise對象的狀態為失敗
onRejectedNext(err)
}
}
// 封裝一個失敗時執行的函數
let rejected = error => {
try {
if (!isFunction(onRejected)) {
onRejectedNext(error)
} else {
let res = onRejected(error);
if (res instanceof MyPromise) {
// 如果當前回調函數返回MyPromise對象,必須等待其狀態改變后在執行下一個回調
res.then(onFulfilledNext, onRejectedNext)
} else {
//否則會將返回結果直接作為參數,傳入下一個then的回調函數,并立即執行下一個then的回調函數
onFulfilledNext(res)
}
}
} catch (err) {
// 如果函數執行出錯,新的Promise對象的狀態為失敗
onRejectedNext(err)
}
}
switch (_status) {
// 當狀態為pending時,將then方法回調函數加入執行隊列等待執行
case PENDING:
this._fulfilledQueues.push(fulfilled)
this._rejectedQueues.push(rejected)
break
// 當狀態已經改變時,立即執行對應的回調函數
case FULFILLED:
fulfilled(_value)
break
case REJECTED:
rejected(_value)
break
}
})
}
這一部分可能不太好理解,讀者需要結合上文中
then
方法的規則來細細的分析。
接著修改 _resolve
和 _reject
:依次執行隊列中的函數
當 resolve
或 reject
方法執行時,我們依次提取成功或失敗任務隊列當中的函數開始執行,并清空隊列,從而實現 then
方法的多次調用,實現的代碼如下:
// 添加resovle時執行的函數
_resolve (val) {
if (this._status !== PENDING) return
// 依次執行成功隊列中的函數,并清空隊列
const run = () => {
this._status = FULFILLED
this._value = val
let cb;
while (cb = this._fulfilledQueues.shift()) {
cb(val)
}
}
// 為了支持同步的Promise,這里采用異步調用
setTimeout(() => run(), 0)
}
// 添加reject時執行的函數
_reject (err) {
if (this._status !== PENDING) return
// 依次執行失敗隊列中的函數,并清空隊列
const run = () => {
this._status = REJECTED
this._value = err
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(err)
}
}
// 為了支持同步的Promise,這里采用異步調用
setTimeout(run, 0)
}
這里還有一種特殊的情況,就是當 resolve
方法傳入的參數為一個 Promise
對象時,則該 Promise
對象狀態決定當前 Promise
對象的狀態。
const p1 = new Promise(function (resolve, reject) {
// ...
});
const p2 = new Promise(function (resolve, reject) {
// ...
resolve(p1);
})
上面代碼中,p1
和 p2
都是 Promise
的實例,但是 p2
的resolve
方法將 p1
作為參數,即一個異步操作的結果是返回另一個異步操作。
注意,這時 p1
的狀態就會傳遞給 p2
,也就是說,p1
的狀態決定了 p2
的狀態。如果 p1
的狀態是Pending
,那么 p2
的回調函數就會等待 p1
的狀態改變;如果 p1
的狀態已經是 Fulfilled
或者 Rejected
,那么 p2
的回調函數將會立刻執行。
我們來修改_resolve
來支持這樣的特性
// 添加resovle時執行的函數
_resolve (val) {
const run = () => {
if (this._status !== PENDING) return
this._status = FULFILLED
// 依次執行成功隊列中的函數,并清空隊列
const runFulfilled = (value) => {
let cb;
while (cb = this._fulfilledQueues.shift()) {
cb(value)
}
}
// 依次執行失敗隊列中的函數,并清空隊列
const runRejected = (error) => {
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(error)
}
}
/* 如果resolve的參數為Promise對象,則必須等待該Promise對象狀態改變后,
當前Promsie的狀態才會改變,且狀態取決于參數Promsie對象的狀態
*/
if (val instanceof MyPromise) {
val.then(value => {
this._value = value
runFulfilled(value)
}, err => {
this._value = err
runRejected(err)
})
} else {
this._value = val
runFulfilled(val)
}
}
// 為了支持同步的Promise,這里采用異步調用
setTimeout(run, 0)
}
這樣一個Promise就基本實現了,現在我們來加一些其它的方法
catch
方法
相當于調用
then
方法, 但只傳入Rejected
狀態的回調函數
// 添加catch方法
catch (onRejected) {
return this.then(undefined, onRejected)
}
靜態 resolve
方法
// 添加靜態resolve方法
static resolve (value) {
// 如果參數是MyPromise實例,直接返回這個實例
if (value instanceof MyPromise) return value
return new MyPromise(resolve => resolve(value))
}
靜態 reject
方法
// 添加靜態reject方法
static reject (value) {
return new MyPromise((resolve ,reject) => reject(value))
}
靜態 all
方法
// 添加靜態all方法
static all (list) {
return new MyPromise((resolve, reject) => {
/**
* 返回值的集合
*/
let values = []
let count = 0
for (let [i, p] of list.entries()) {
// 數組參數如果不是MyPromise實例,先調用MyPromise.resolve
this.resolve(p).then(res => {
values[i] = res
count++
// 所有狀態都變成fulfilled時返回的MyPromise狀態就變成fulfilled
if (count === list.length) resolve(values)
}, err => {
// 有一個被rejected時返回的MyPromise狀態就變成rejected
reject(err)
})
}
})
}
靜態 race
方法
// 添加靜態race方法
static race (list) {
return new MyPromise((resolve, reject) => {
for (let p of list) {
// 只要有一個實例率先改變狀態,新的MyPromise的狀態就跟著改變
this.resolve(p).then(res => {
resolve(res)
}, err => {
reject(err)
})
}
})
}
finally
方法
finally
方法用于指定不管Promise
對象最后狀態如何,都會執行的操作
finally (cb) {
return this.then(
value => MyPromise.resolve(cb()).then(() => value),
reason => MyPromise.resolve(cb()).then(() => { throw reason })
);
};
這樣一個完整的 Promsie
就實現了,大家對 Promise
的原理也有了解,可以讓我們在使用Promise的時候更加清晰明了。
完整代碼如下
// 判斷變量否為function
const isFunction = variable => typeof variable === 'function'
// 定義Promise的三種狀態常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
class MyPromise {
constructor (handle) {
if (!isFunction(handle)) {
throw new Error('MyPromise must accept a function as a parameter')
}
// 添加狀態
this._status = PENDING
// 添加狀態
this._value = undefined
// 添加成功回調函數隊列
this._fulfilledQueues = []
// 添加失敗回調函數隊列
this._rejectedQueues = []
// 執行handle
try {
handle(this._resolve.bind(this), this._reject.bind(this))
} catch (err) {
this._reject(err)
}
}
// 添加resovle時執行的函數
_resolve (val) {
const run = () => {
if (this._status !== PENDING) return
this._status = FULFILLED
// 依次執行成功隊列中的函數,并清空隊列
const runFulfilled = (value) => {
let cb;
while (cb = this._fulfilledQueues.shift()) {
cb(value)
}
}
// 依次執行失敗隊列中的函數,并清空隊列
const runRejected = (error) => {
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(error)
}
}
/* 如果resolve的參數為Promise對象,則必須等待該Promise對象狀態改變后,
當前Promsie的狀態才會改變,且狀態取決于參數Promsie對象的狀態
*/
if (val instanceof MyPromise) {
val.then(value => {
this._value = value
runFulfilled(value)
}, err => {
this._value = err
runRejected(err)
})
} else {
this._value = val
runFulfilled(val)
}
}
// 為了支持同步的Promise,這里采用異步調用
setTimeout(run, 0)
}
// 添加reject時執行的函數
_reject (err) {
if (this._status !== PENDING) return
// 依次執行失敗隊列中的函數,并清空隊列
const run = () => {
this._status = REJECTED
this._value = err
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(err)
}
}
// 為了支持同步的Promise,這里采用異步調用
setTimeout(run, 0)
}
// 添加then方法
then (onFulfilled, onRejected) {
const { _value, _status } = this
// 返回一個新的Promise對象
return new MyPromise((onFulfilledNext, onRejectedNext) => {
// 封裝一個成功時執行的函數
let fulfilled = value => {
try {
if (!isFunction(onFulfilled)) {
onFulfilledNext(value)
} else {
let res = onFulfilled(value);
if (res instanceof MyPromise) {
// 如果當前回調函數返回MyPromise對象,必須等待其狀態改變后在執行下一個回調
res.then(onFulfilledNext, onRejectedNext)
} else {
//否則會將返回結果直接作為參數,傳入下一個then的回調函數,并立即執行下一個then的回調函數
onFulfilledNext(res)
}
}
} catch (err) {
// 如果函數執行出錯,新的Promise對象的狀態為失敗
onRejectedNext(err)
}
}
// 封裝一個失敗時執行的函數
let rejected = error => {
try {
if (!isFunction(onRejected)) {
onRejectedNext(error)
} else {
let res = onRejected(error);
if (res instanceof MyPromise) {
// 如果當前回調函數返回MyPromise對象,必須等待其狀態改變后在執行下一個回調
res.then(onFulfilledNext, onRejectedNext)
} else {
//否則會將返回結果直接作為參數,傳入下一個then的回調函數,并立即執行下一個then的回調函數
onFulfilledNext(res)
}
}
} catch (err) {
// 如果函數執行出錯,新的Promise對象的狀態為失敗
onRejectedNext(err)
}
}
switch (_status) {
// 當狀態為pending時,將then方法回調函數加入執行隊列等待執行
case PENDING:
this._fulfilledQueues.push(fulfilled)
this._rejectedQueues.push(rejected)
break
// 當狀態已經改變時,立即執行對應的回調函數
case FULFILLED:
fulfilled(_value)
break
case REJECTED:
rejected(_value)
break
}
})
}
// 添加catch方法
catch (onRejected) {
return this.then(undefined, onRejected)
}
// 添加靜態resolve方法
static resolve (value) {
// 如果參數是MyPromise實例,直接返回這個實例
if (value instanceof MyPromise) return value
return new MyPromise(resolve => resolve(value))
}
// 添加靜態reject方法
static reject (value) {
return new MyPromise((resolve ,reject) => reject(value))
}
// 添加靜態all方法
static all (list) {
return new MyPromise((resolve, reject) => {
/**
* 返回值的集合
*/
let values = []
let count = 0
for (let [i, p] of list.entries()) {
// 數組參數如果不是MyPromise實例,先調用MyPromise.resolve
this.resolve(p).then(res => {
values[i] = res
count++
// 所有狀態都變成fulfilled時返回的MyPromise狀態就變成fulfilled
if (count === list.length) resolve(values)
}, err => {
// 有一個被rejected時返回的MyPromise狀態就變成rejected
reject(err)
})
}
})
}
// 添加靜態race方法
static race (list) {
return new MyPromise((resolve, reject) => {
for (let p of list) {
// 只要有一個實例率先改變狀態,新的MyPromise的狀態就跟著改變
this.resolve(p).then(res => {
resolve(res)
}, err => {
reject(err)
})
}
})
}
finally (cb) {
return this.then(
value => MyPromise.resolve(cb()).then(() => value),
reason => MyPromise.resolve(cb()).then(() => { throw reason })
);
}
}
如果覺得還行的話,點個贊、收藏一下再走吧。