本篇文章主要在於探究 Promise 的實現原理，帶領大家一步一步實現一個 Promise , 不對其用法做說明，如果讀者還對Promise的用法不瞭解，可以檢視阮一峰老師的ES6 Promise教程。

接下來，帶你一步一步實現一個 Promise

1. Promise 基本結構

new Promise((resolve, reject) => { setTimeout(() => { resolve('FULFILLED') }, 1000) })

123456

newPromise((resolve,reject)=>{setTimeout(()=>{resolve('FULFILLED')},1000)})

建構函式Promise必須接受一個函式作為引數，我們稱該函式為handle，handle又包含resolve和reject兩個引數，它們是兩個函式。

定義一個判斷一個變數是否為函式的方法，後面會用到

// 判斷變數否為function const isFunction = variable => typeof variable === 'function'

123	// 判斷變數否為functionconstisFunction=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') } } }

12345678

classMyPromise{constructor(handle){if(!isFunction(handle)){thrownewError('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) })

123456

newPromise((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'

12345

// 定義Promise的三種狀態常量constPENDING='PENDING'constFULFILLED='FULFILLED'constREJECTED='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 } }

123456789101112131415161718192021222324252627282930

classMyPromise{constructor(handle){if(!isFunction(handle)){thrownewError('MyPromise must accept a function as a parameter')}// 新增狀態this._status=PENDING// 新增狀態this._value=undefined// 執行handletry{handle(this._resolve.bind(this),this._reject.bind(this))}catch(err){this._reject(err)}}// 新增resovle時執行的函式_resolve(val){if(this._status!==PENDING)returnthis._status=FULFILLEDthis._value=val}// 新增reject時執行的函式_reject(err){if(this._status!==PENDING)returnthis._status=REJECTEDthis._value=err}}

這樣就實現了 Promise 狀態和值的改變。下面說一說 Promise 的核心: then 方法

3. Promise 的 then 方法

Promise 物件的 then 方法接受兩個引數：

promise.then(onFulfilled, onRejected)

12	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);

12	promise2=promise1.then(onFulfilled,onRejected);

因此 promise 支援鏈式呼叫

promise1.then(onFulfilled1, onRejected1).then(onFulfilled2, onRejected2);

12	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秒後打印出：這裡返回一個普通值 })

12345678910111213

let promise1=newPromise((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 })

1234567891011121314151617

let promise1=newPromise((resolve,reject)=>{setTimeout(()=>{resolve()},1000)})promise2=promise1.then(res=>{// 返回一個Promise物件returnnewPromise((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 })

1234567891011121314

let promise1=newPromise((resolve,reject)=>{setTimeout(()=>{resolve('success')},1000)})promise2=promise1.then(res=>{thrownewError('這裡丟擲一個異常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) })

123456789101112

let promise1=newPromise((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 })

123456789101112

let promise1=newPromise((resolve,reject)=>{setTimeout(()=>{reject('fail')},1000)})promise2= 相關推薦 Promise實現原理（附原始碼） 本篇文章主要在於探究 Promise 的實現原理，帶領大家一步一步實現一個 Promise , 不對其用法做說明，如果讀者還對Promise的用法不瞭解，可以檢視阮一峰老師的ES6 Promise教程。 接下來，帶你一步一步實現一個 Promise 1. Promise 基本結 學習Promise實現原理（附源碼） cte 標記 必須 es6 nal 每次 fine 函數返回 如果 本篇文章主要在於探究 Promise 的實現原理，帶領大家一步一步實現一個 Promise , 不對其用法做說明，如果讀者還對Promise的用法不了解，可以查看阮一峰老師的ES6 Promise教程。 1 單點登入（SSO）實現方式（附原始碼） 原文地址：http://www.cnblogs.com/youring2/p/sso-practice.html SSO的基本概念 SSO英文全稱Single Sign On（單點登入）。SSO是在多個應用系統中，使用者只需要登入一次就可以訪問所有相互信任的應用系統 誰都能看懂的單點登入（SSO）實現方式（附原始碼） SSO的基本概念 SSO英文全稱Single Sign On（單點登入）。SSO是在多個應用系統中，使用者只需要登入一次就可以訪問所有相互信任的應用系統。它包括可以將這次主要的登入對映到其他應用中用於同一個使用者的登入的機制。它是目前比較流行的企業業務整合的解決方案之一 半透明視窗中顯示標準控制元件（控制元件與文字不透明）的實現方案（附原始碼） 原文 http://blog.csdn.net/harbinzju/article/details/7907127 和大家分享一下在半透明視窗中顯示標準控制元件的實現方案。通過層疊視窗可以簡單實現半透明與不規則形狀視窗的效果，但在其上顯示標準控制元件（控制元件與文字不 CVPR論文《100+ Times FasterWeighted Median Filter (WMF)》的實現和解析（附原始碼）。 任意半徑中值濾波（擴充套件至百分比濾波器）O(1)時間複雜度演算法的原理、實現及效果 任意半徑中值濾波（擴充套件至百分比濾波器）O(1)時間複雜度演算法的原理、實現及 　　四年前第一次看到《100+ Times FasterWeighted Median Filter (WMF)》一文時，因為他附帶了原始碼，而且還是CVPR論文，因此，當時也對程式碼進行了一定的整理和解讀，但是當時覺得這個演算法雖然對原始速度有不少的提高，但是還是比較慢。因此，沒有怎麼在意，這幾天有幾位朋友 原理和C++實現的演示程式（附原始碼） http://blog.csdn.net/mahabharata_/article/details/71856907    大二的時候，曾受老師所託，用C++而不是OpenGL去寫B樣條曲線的教學程式。時隔一年，發現原始碼找不見了，所以重新寫了一遍，也完善了部分功能，順 P2P之UDP穿透NAT的原理與實現（附原始碼） 原文連結 關於UDP穿透NAT的中文資料在網路上是很少的，僅有<<P2P之UDP穿透NAT的原理與實現(shootingstars)>>這篇文章有實際的參考價值。 本人近兩年來也一直從事P2P方面的開發工作，比較有代表性的是個人開發的BitTorr mysql 使用 limit 實現底層分頁（附原始碼） 原理解析： <select id="queryProductList" resultType="com.pojo.Product"> SELECT * FROM tb_product ORDER BY priority DESC LIMIT #{rowIndex},#{p 安卓識別身份證，自動提取身份證資訊功能實現（附原始碼） 原始碼下載地址：注：原始碼裡沒有騰訊優圖的賬號需要填寫自己的 下載地址 先講幾下.首先我們需要去騰訊優圖申請一個賬號，因為身份證識別需要用到第三方介面如圖所示 我申請的是掃描身份證，當然還有其他的功能，比如掃描銀行卡，營業執照，車牌等等  ，大家可以去研究一下 python實現Excel檔案讀取的程式（附原始碼） python實現Excel檔案讀取的程式   前一段時間幫一個朋友用python寫了一個讀Excel程式操作的程式，具體要求為：讀取兩個Excel檔案，根據其中某個特徵的特徵值對這兩個檔案進行取交集操作，生成三個Excel檔案，第一個Excel檔案為這兩個檔案的公 js實現移動端省市區三級聯動選擇器（附原始碼） 效果圖:  核心程式碼： <script> var nameEl = document.getElementById('sel_city'); var first = []; /* 省，直轄市 */ var second = [] CVPR論文《100+ Times FasterWeighted Median Filter (WMF)》的實現和解析（附原始碼）。       四年前第一次看到《100+ Times FasterWeighted Median Filter (WMF)》一文時，因為他附帶了原始碼，而且還是CVPR論文，因此，當時也對程式碼進行了一定的整理和解讀，但是當時覺得這個演算法雖然對原始速度有不少的提高，但是還是比較慢。因此，沒有怎麼在意，這幾天有 用DirectX實現魔方（三）視角變換及縮放（附原始碼） 在本系列第一篇介紹過滑鼠按鍵的功能，如下。 左鍵拖拽 - 旋轉魔方 右鍵拖拽 - 變換視角 滾輪 - 縮放魔方 今天研究一下如何實現後面兩個功能，用到的技術主要是Arcball，Arcball是實現Model-View-Camera的重要技術，這裡的旋轉基於Quaternion（四元數）來實現 Python：遊戲：300行程式碼實現俄羅斯方塊 Python：遊戲：貪吃蛇 Python：遊戲：掃雷（附原始碼） 本文程式碼基於 python3.6 和 pygame1.9.4。 俄羅斯方塊是兒時最經典的遊戲之一，剛開始接觸 pygame 的時候就想寫一個俄羅斯方塊。但是想到旋轉，停靠，消除等操作，感覺好像很難啊，等真正寫完了發現，一共也就 300 行程式碼，並沒有什麼難的。 先來看一個遊戲截圖，有點醜，好 Android 本地歷史記錄、及產品標籤（支援單選、多選）實現（附原始碼）（使用鴻洋大神的FlowLayout開源庫）         最近的專案需要做本地歷史記錄功能，以前寫的有些過時了，就在網上查了查較好的開源庫、實現方式等。最終選擇了鴻洋大神的FlowLayout流式佈局，再搭配SharedPreferencesUtil工具類來實現本地歷史記錄功能。同時FlowLayout開源庫還非常適 【機器學習演算法-python實現】KNN-k近鄰演算法的實現（附原始碼）  下載地址 kNN演算法及例項原始碼實現#coding=utf-8 ''' Created on Sep 16, 2010 kNN: k Nearest Neighbors Input: inX: vector to compare to existing dataset (1xN) MyEclipse 2017 整合SSH三大框架 到登入功能的實現（附原始碼） 本來以為學完Java EE之後用個三大框架沒什麼難度，結果昨天搭環境就搞了一晚上，還是靠室友找了半天才找出錯誤在哪，為了避免重複踩坑，而且目前網上用myeclipse2017做環境的教程還是蠻少的，就寫篇部落格記錄一下 先看一下最終的架構 整 SwitchButton 開關按鈕 的多種實現方式 （附原始碼DEMO） 剛開始接觸開關樣式的按鈕是在IOS系統上面，它的切換以及滑動十分帥氣,深入人心。 所謂的開關按鈕，就是隻有2個狀態：on和off，下圖就是系統IOS 7上開關按鈕效果。 起初我在android上我只會使用CheckBox去滿足對應的功能。後來，檢視開發文件發現，andro webuploader結合SpringMVC實現多圖片上傳（附原始碼） 本案例實現多圖片上傳並且可以在前端預覽圖片，後端使用SpringMVC框架接收檔案，文章最後附原始碼。 一、效果 ![這裡寫圖片描述](https://img-blog.csdn.net/2018082816114114?watermark/2/text/aH