觀看之前請(qǐng)先熟悉promise的基本使用
一冀瓦、剖析promise由哪些東西組成
在日常的使用中贯底，我們可以知道丰辣，一個(gè)完整的promise應(yīng)當(dāng)包含成功、失敗禽捆、進(jìn)行中這三個(gè)狀態(tài)笙什，同時(shí)還有resolve，reject兩個(gè)改變狀態(tài)的成員函數(shù)胚想。最后還會(huì)有一個(gè)then函數(shù)來(lái)接收promise的執(zhí)行結(jié)果
在了解了上述的內(nèi)容之后琐凭，一個(gè)promise的雛形就出來(lái)了
class myPromise {
constructor(executor) {
//默認(rèn)狀態(tài)為pending
this.status = 'pending'
//成功的默認(rèn)值為undefined
this.successVal = undefined
//失敗的默認(rèn)值為undefined
this.errorVal = undefined
//初始化時(shí)調(diào)用傳入的回調(diào)函數(shù)
executor(this.resolve,this.reject)
}
resolve = (data) => {
}
reject = (err) => {
}
then = (success_cb,error_cb) => {
}
}
這里要說(shuō)明一下，then函數(shù)浊服，可能在日常使用中大家都習(xí)慣性的只傳入一個(gè)參數(shù)统屈。其實(shí)then是有兩個(gè)參數(shù)的胚吁，第一個(gè)參數(shù)是promise成功時(shí)調(diào)用，第二個(gè)參數(shù)是失敗時(shí)調(diào)用愁憔。而我們熟知的catch函數(shù)腕扶，其實(shí)內(nèi)部就是調(diào)用的then函數(shù)，只不過(guò)傳入的是失敗的回調(diào)
catch = (err_cb) => {
this.then(undefined, err_cb)
}
下面來(lái)完善一下幾個(gè)函數(shù)的內(nèi)容
resolve = (data) => {
if (this.status === 'pending') {
this.status = 'success'
this.successVal = data
}
}
reject = (err) => {
if (this.status === 'pending') {
this.status = 'error'
this.errorVal = err
}
}
then = (success_cb,error_cb) => {
setTimeout(() => {
if (this.status === 'success') {
success_cb(this.successVal )
}else if(this.status === 'error'){
success_cb(this.errorVal )
}
})
}
這樣吨掌，一個(gè)簡(jiǎn)易版的promise就實(shí)現(xiàn)了半抱。
接下來(lái)就需要去實(shí)現(xiàn)promise處理異步問(wèn)題。
首先分析一下膜宋，出現(xiàn)了異步代碼之后會(huì)發(fā)生什么情況：
通常使用一個(gè)有異步的promise會(huì)這樣
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(123)
},2000)
})
這樣我們?cè)谡{(diào)用then的時(shí)候其實(shí)resolve還沒(méi)有被執(zhí)行窿侈，promise的狀態(tài)也并沒(méi)有變更。所以我們要做的就是講then函數(shù)接收到的參數(shù)存起來(lái)秋茫，等到promise的狀態(tài)變了之后再去調(diào)用他史简。這樣就能做到處理異步問(wèn)題了
constructor(executor) {
//默認(rèn)狀態(tài)為pending
this.status = 'pending'
//成功的默認(rèn)值為undefined
this.successVal = undefined
//失敗的默認(rèn)值為undefined
this.errorVal = undefined
//存放成功的回調(diào)函數(shù)
this.successCallBackList = []
//存放失敗的回調(diào)函數(shù)
this.errorCallBackList = []
//自動(dòng)執(zhí)行一次傳入的回調(diào)函數(shù)
try {
executor(this.resolve, this.reject)
} catch (err) {
this.reject(err)
}
}
resolve = (data) => {
if (this.status === 'pending') {
this.status = 'success'
this.successVal = data
this.successCallBackList.forEach(fn => fn(this.successVal))
}
}
reject = (err) => {
if (this.status === 'pending') {
this.status = 'error'
this.errorVal = err
this.errorCallBackList.forEach(fn => fn(this.errorVal))
}
}
then = (success_cb,error_cb) => {
setTimeout(() => {
if (this.status === 'success') {
success_cb(this.successVal )
}else if(this.status === 'error'){
success_cb(this.errorVal )
}else{
this.successCallBackList.push(success_cb)
this.errorCallBackList.push(error_cb)
}
})
}
上面代碼中就是在then里判斷當(dāng)前狀態(tài)，如果為pending的話(huà)就將回調(diào)存入對(duì)應(yīng)的數(shù)組学辱，然后再resolve和reject函數(shù)中去遍歷存放回調(diào)的數(shù)組并且一一執(zhí)行里頭的函數(shù)乘瓤。
這樣異步問(wèn)題也處理好了。
接下來(lái)就是最重要的處理then的鏈?zhǔn)交卣{(diào)了策泣。這也是promise的特色衙傀。
首先需要明白的一點(diǎn)是，promise的then函數(shù)會(huì)返回一個(gè)新的promise萨咕，這樣我們才可以做到一直.then調(diào)用统抬。其次，后面的then會(huì)拿到上一個(gè)then的返回值危队。
明白了這個(gè)概念之后我們就可以去著手寫(xiě)then函數(shù)了
then = (success_cb, error_cb) => {
const promise2 = new myPromise((resolve, reject) => {
if (this.status === 'success') {
setTimeout(() => {
try {
if (typeof success_cb !== 'function') {
resolve(this.successVal)
} else {
let x = success_cb(this.successVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
} else if (this.status === 'error') {
setTimeout(() => {
try {
if (typeof error_cb !== 'function') {
reject(this.errorVal)
} else {
let x = error_cb(this.errorVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
} else {
this.successCallBackList.push(() => {
setTimeout(() => {
try {
if (typeof success_cb !== 'function') {
resolve(this.successVal)
} else {
let x = success_cb(this.successVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
})
this.errorCallBackList.push(() => {
setTimeout(() => {
try {
if (typeof error_cb !== 'function') {
reject(this.errorVal)
} else {
let x = error_cb(this.errorVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
})
}
}
)
return promise2
}
/**
* @param promise2 promise1.then中返回的新的promise
* @param x promise1中then方法的回調(diào)函數(shù)返回的值
* @param resolve promise2的reslove回調(diào)
* @param reject promise2的reject回調(diào)
*/
function resolvePromise(promise2, x, resolve, reject) {
if (x === promise2) {
/**
* 如果x等于promis2 則拋出異常聪建，防止陷入死循環(huán) 拋出的異常會(huì)被上一個(gè)promise的then方法捕獲到并且直接走reject方法
*/
throw new TypeError('Chaining cycle detected for promise');
}
if (x instanceof myPromise) {
/**
* 如果 x 為 Promise ，則使 promise2 接受 x 的狀態(tài)
* 也就是繼續(xù)執(zhí)行x茫陆，如果執(zhí)行的時(shí)候拿到一個(gè)y金麸，還要繼續(xù)解析y
*/
x.then(y => {
resolvePromise(promise2, y, resolve, reject)
}, reject)
} else if (x !== null && ((typeof x === 'object') || (typeof x === 'function'))) {
try {
var then = x.then
} catch (e) {
return reject(e)
}
if (typeof then === 'function') {
let called = false //防止多次調(diào)用
try {
then.call(x, y => {
if (called) return
called = true
resolvePromise(promise2, y, resolve, reject)
}, err => {
if (called) return
called = true
reject(err)
})
} catch (err) {
if (called) return
called = true
reject(err)
}
} else {
resolve(x)
}
} else {
resolve(x)
}
}
resolvePromise函數(shù)就是處理上一個(gè)then函數(shù)的返回值的工具函數(shù)。
then函數(shù)里的邏輯大致上就是簿盅，返回一個(gè)新的promise挥下，這個(gè)新的promise里可以訪問(wèn)到上一個(gè)promise的所有屬性，同時(shí)可以通過(guò)調(diào)用自身的resolve和reject改變自身的狀態(tài)桨醋，并將上一個(gè)promise的then函數(shù)的返回值作為參數(shù)保存下來(lái)棚瘟，這樣他自己的then函數(shù)就可以訪問(wèn)到這個(gè)值了。也就是我們所說(shuō)的下一個(gè)then能拿到上一個(gè)then的返回值喜最。而在then函數(shù)中可能返回各種情況的值偎蘸，所以寫(xiě)了一個(gè)resolvePromise函數(shù)來(lái)處理各種情況。
以上就是一個(gè)完整的promise了。重要的就是理解then函數(shù)的鏈?zhǔn)交卣{(diào)迷雪。把這個(gè)搞明白了限书，整個(gè)promise也就豁然開(kāi)朗了。
另外附上完整的代碼
/**
* @param promise2 promise1.then中返回的新的promise
* @param x promise1中then方法的回調(diào)函數(shù)返回的值
* @param resolve promise2的reslove回調(diào)
* @param reject promise2的reject回調(diào)
*/
function resolvePromise(promise2, x, resolve, reject) {
if (x === promise2) {
/**
* 如果x等于promis2 則拋出異常章咧，防止陷入死循環(huán) 拋出的異常會(huì)被上一個(gè)promise的then方法捕獲到并且直接走reject方法
*/
throw new TypeError('Chaining cycle detected for promise');
}
if (x instanceof myPromise) {
/**
* 如果 x 為 Promise 蔗包，則使 promise2 接受 x 的狀態(tài)
* 也就是繼續(xù)執(zhí)行x，如果執(zhí)行的時(shí)候拿到一個(gè)y慧邮，還要繼續(xù)解析y
*/
x.then(y => {
resolvePromise(promise2, y, resolve, reject)
}, reject)
} else if (x !== null && ((typeof x === 'object') || (typeof x === 'function'))) {
try {
var then = x.then
} catch (e) {
return reject(e)
}
if (typeof then === 'function') {
let called = false //防止多次調(diào)用
try {
then.call(x, y => {
if (called) return
called = true
resolvePromise(promise2, y, resolve, reject)
}, err => {
if (called) return
called = true
reject(err)
})
} catch (err) {
if (called) return
called = true
reject(err)
}
} else {
resolve(x)
}
} else {
resolve(x)
}
}
class myPromise {
//靜態(tài)resolve方法，可以讓使用者直接通過(guò)類(lèi)來(lái)訪問(wèn)舟陆，不需要實(shí)例化這個(gè)類(lèi)误澳。同時(shí)以static關(guān)鍵字標(biāo)識(shí)的屬性不會(huì)被實(shí)例繼承，只能通過(guò)類(lèi)自身訪問(wèn)
static resolve() {
}
constructor(executor) {
//默認(rèn)狀態(tài)為pending
this.status = 'pending'
//成功的默認(rèn)值為undefined
this.successVal = undefined
//失敗的默認(rèn)值為undefined
this.errorVal = undefined
//存放成功的回調(diào)函數(shù)
this.successCallBackList = []
//存放失敗的回調(diào)函數(shù)
this.errorCallBackList = []
//自動(dòng)執(zhí)行一次傳入的回調(diào)函數(shù)
try {
executor(this.resolve, this.reject)
} catch (err) {
this.reject(err)
}
}
resolve = (data) => {
if (this.status === 'pending') {
this.status = 'success'
this.successVal = data
this.successCallBackList.forEach(fn => fn(this.successVal))
}
}
reject = (err) => {
if (this.status === 'pending') {
this.status = 'error'
this.errorVal = err
this.errorCallBackList.forEach(fn => fn(this.errorVal))
}
}
then = (success_cb, error_cb) => {
const promise2 = new myPromise((resolve, reject) => {
if (this.status === 'success') {
setTimeout(() => {
try {
if (typeof success_cb !== 'function') {
resolve(this.successVal)
} else {
let x = success_cb(this.successVal)
//簡(jiǎn)易處理then
if(x instanceof myPromise){
if(x.status==='pending'){
x.then()
}else{
//x的狀態(tài)不處于pending狀態(tài)秦躯，則將新的promise的resolve和reject作為x的then函數(shù)的參數(shù)傳入
//這樣忆谓，當(dāng)x的狀態(tài)變更了，就會(huì)調(diào)用我們傳入的resolve和reject踱承。并且會(huì)將x的最終值傳入倡缠。
x.then(resolve, reject)
}
}else{
resolve(x)
}
// resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
} else if (this.status === 'error') {
setTimeout(() => {
try {
if (typeof error_cb !== 'function') {
reject(this.errorVal)
} else {
let x = error_cb(this.errorVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
} else {
this.successCallBackList.push(() => {
setTimeout(() => {
try {
if (typeof success_cb !== 'function') {
resolve(this.successVal)
} else {
let x = success_cb(this.successVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
})
this.errorCallBackList.push(() => {
setTimeout(() => {
try {
if (typeof error_cb !== 'function') {
reject(this.errorVal)
} else {
let x = error_cb(this.errorVal)
resolvePromise(promise2, x, resolve, reject)
}
} catch (err) {
reject(err)
}
})
})
}
}
)
return promise2
}
catch = (err_cb) => {
this.then(undefined, err_cb)
}
}
