摘要:如果的狀態是,那么的回調函數就會等待的狀態改變如果的狀態已經是或者,那么的回調函數將會立刻執行。
本篇文章主要在于探究 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 // 依次執行成功隊列中的函數,并清空隊列 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 this._status = FULFILLED runFulfilled(value) }, err => { this._value = err this._status = REJECTED runRejected(err) }) } else { this._value = val this._status = FULFILLED 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 // 依次執行成功隊列中的函數,并清空隊列 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 this._status = FULFILLED runFulfilled(value) }, err => { this._value = err this._status = REJECTED runRejected(err) }) } else { this._value = val this._status = FULFILLED 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 }) ); } }
如果覺得還行的話,點個贊、收藏一下再走吧。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90589.html
摘要:模塊化是隨著前端技術的發展,前端代碼爆炸式增長后,工程化所采取的必然措施。目前模塊化的思想分為和。特別指出,事件不等同于異步,回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化 目前 Vue.js 的火爆不亞于當初的 React,本人對寫代碼有潔癖,代碼也是藝術。此篇是準備篇,工欲善其事,必先利其器。我們先在代...
摘要:前言一直很喜歡看科技新聞,多年來一直混跡于,以前西貝的評論區是匿名的,所以評論區非常活躍,各種噴子和段子,不過也確實很歡樂,可以說那是西貝人氣最旺的時候。 前言 一直很喜歡看科技新聞,多年來一直混跡于cnBeta,以前西貝的評論區是匿名的,所以評論區非常活躍,各種噴子和段子,不過也確實很歡樂,可以說那是西貝人氣最旺的時候。然而自從去年網信辦出臺了《互聯網跟帖評論服務管理規定》,要求只有...
摘要:前言一直很喜歡看科技新聞,多年來一直混跡于,以前西貝的評論區是匿名的,所以評論區非常活躍,各種噴子和段子,不過也確實很歡樂,可以說那是西貝人氣最旺的時候。 前言 一直很喜歡看科技新聞,多年來一直混跡于cnBeta,以前西貝的評論區是匿名的,所以評論區非常活躍,各種噴子和段子,不過也確實很歡樂,可以說那是西貝人氣最旺的時候。然而自從去年網信辦出臺了《互聯網跟帖評論服務管理規定》,要求只有...
摘要:執行的時候呢即可如何處理鏈式的且保證順序每個后面鏈一個對象該對象包含子三個屬性當父狀態改變完畢執行完相應的的時候呢,拿到子在等待這個子狀態改變,在執行相應的。 promise源碼分析 初級入門以及如何使用請看 阮一峰promise對象講解 先上一坨代碼,后面我們要基于這坨代碼來實現自定義promise 原始方法 setTimeout(function(){ var a=100...
摘要:拿到秋招的同學,如確定入職需與用人單位簽署三方協議,以保證雙方的利益不受損失。當然每個崗位所要求的側重點不同,但卻百變不離其宗。方法論要想達成某個目標都有其特定的方法論,學習技術也不例外,掌握適當的學習方法才能事半功倍。 寫在前面的話 筆者從17年的2月份開始準備春招,其中遇到不少坑,也意識到自己走過的彎路。故寫了這篇文章總結一番,本文適合主動學習的,對自己要學的課程不明確的,對面試有...
閱讀 1074·2021-11-24 09:39
閱讀 1307·2021-11-18 13:18
閱讀 2425·2021-11-15 11:38
閱讀 1824·2021-09-26 09:47
閱讀 1625·2021-09-22 15:09
閱讀 1624·2021-09-03 10:29
閱讀 1510·2019-08-29 17:28
閱讀 2951·2019-08-29 16:30