2. 程式人生 > >promiseA+規範及實現

promiseA+規範及實現

阿新 • • 發佈：2018-11-26

Promise表示一個非同步操作的最終結果。與Promise最主要的互動方法是通過將函式傳入它的then方法從而獲取得Promise最終的值或Promise最終被拒絕（reject）的原因。

1.術語

promise是一個包含了相容promise規範then方法的物件或函式,
thenable是一個包含了then方法的物件或函式。
value是任何Javascript值。 (包括 undefined, thenable, promise等)。
exception是由throw表示式丟擲來的值。
reason 是一個用於描述Promise被拒絕原因的值。

2.要求

2.1 Promise狀態

一個Promise必須處在其中之一的狀態：pending, fulfilled 或 rejected.

  • 如果是pending狀態,則promise：
    1.可以轉換到fulfilled或rejected狀態。
  • 如果是fulfilled狀態,則promise：
    1. 不能轉換成任何其它狀態。
    2. 必須有一個值，且這個值不能被改變。
  • 如果是rejected狀態,則promise可以：
    1. 不能轉換成任何其它狀態。
    2. 必須有一個原因，且這個值不能被改變。

2.2 then方法

一個Promise必須提供一個then方法來獲取其值或原因。
Promise的then方法接受兩個引數：

promise.then(onFulfilled,onRejected)

  1. onFulfilled和onRejected都是可選引數，如果onFulfilled或者onRejected不是一個函式，則忽略。
  2. 如果onFulfilled是一個函式：1.它必須在promisefulfilled後呼叫，且promise的value為其第一個引數。2.它不能被多次呼叫
  3. 如果onRejected是一個函式：1.它必須在promiserejected後呼叫， 且promise的reason為其第一個引數。2.不能被多次呼叫。
  4. 都只允許在ececution context棧僅包含平臺程式碼時執行
  5. 都必須當做函式呼叫
  6. 對於一個promise，它的then方法可以呼叫多次。所有的onFulfilled或者onRejected都必須按照其註冊順序執行。
  7. then必須返回一個promise

1.什麼是Promise?

Promise是JS非同步程式設計中的重要概念，非同步抽象處理物件，是目前比較流行Javascript非同步程式設計解決方案之一

2.對於幾種常見非同步程式設計方案

  • 回撥函式
  • 事件監聽
  • 釋出/訂閱
  • Promise物件

這裡就拿回調函式說說

1.對於回撥函式 我們用Jquery的ajax獲取資料時 都是以回撥函式方式獲取的資料

$.get(url, (data) => {
    console.log(data)
)

2.如果說 當我們需要傳送多個非同步請求 並且每個請求之間需要相互依賴 那這時 我們只能 以巢狀方式來解決 形成 "回撥地獄"

$.get(url, data1 => {
    console.log(data1)
    $.get(data1.url, data2 => {
        console.log(data1)
    })
})

這樣一來，在處理越多的非同步邏輯時，就需要越深的回撥巢狀，這種編碼模式的問題主要有以下幾個：

  • 程式碼邏輯書寫順序與執行順序不一致，不利於閱讀與維護。
  • 非同步操作的順序變更時，需要大規模的程式碼重構。
  • 回撥函式基本都是匿名函式，bug 追蹤困難。
  • 回撥函式是被第三方庫程式碼（如上例中的 ajax ）而非自己的業務程式碼所呼叫的，造成了 IoC 控制反轉。

Promise 處理多個相互關聯的非同步請求

1.而我們Promise 可以更直觀的方式 來解決 "回撥地獄"

const request = url => { 
    return new Promise((resolve, reject) => {
        $.get(url, data => {
            resolve(data)
        });
    })
};

// 請求data1
request(url).then(data1 => {
return request(data1.url);
}).then(data2 => {
return request(data2.url);
}).then(data3 => {
console.log(data3);
}).catch(err => throw new Error(err));

2.相信大家在 vue/react 都是用axios fetch 請求資料 也都支援 Promise API

import axios from 'axios';
axios.get(url).then(data => {
   console.log(data)
})

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

3.Promise使用

1.Promise 是一個建構函式， new Promise 返回一個 promise物件 接收一個excutor執行函式作為引數, excutor有兩個函式型別形參resolve reject

const promise = new Promise((resolve, reject) => {
       // 非同步處理
       // 處理結束後、呼叫resolve 或 reject
});

2.promise相當於一個狀態機

promise的三種狀態

  • pending
  • fulfilled
  • rejected

1.promise 物件初始化狀態為 pending
2.當呼叫resolve(成功)，會由pending => fulfilled
3.當呼叫reject(失敗)，會由pending => rejected

注意promsie狀態 只能由 pending => fulfilled/rejected, 一旦修改就不能再變

3.promise物件方法

1.then方法註冊 當resolve(成功)/reject(失敗)的回撥函式

// onFulfilled 是用來接收promise成功的值
// onRejected 是用來接收promise失敗的原因
promise.then(onFulfilled, onRejected);

then方法是非同步執行的

2.resolve(成功) onFulfilled會被呼叫

const promise = new Promise((resolve, reject) => {
   resolve('fulfilled'); // 狀態由 pending => fulfilled
});
promise.then(result => { // onFulfilled
    console.log(result); // 'fulfilled' 
}, reason => { // onRejected 不會被呼叫

})

3.reject(失敗) onRejected會被呼叫

const promise = new Promise((resolve, reject) => {
   reject('rejected'); // 狀態由 pending => rejected
});
promise.then(result => { // onFulfilled 不會被呼叫

}, reason => { // onRejected
console.log(rejected); // ‘rejected’
})

4.promise.catch

在鏈式寫法中可以捕獲前面then中傳送的異常,

promise.catch(onRejected)
相當於
promise.then(null, onRrejected);

// 注意
// onRejected 不能捕獲當前onFulfilled中的異常
promise.then(onFulfilled, onRrejected);

// 可以寫成：
promise.then(onFulfilled)
.catch(onRrejected);

4.promise chain

promise.then方法每次呼叫 都返回一個新的promise物件 所以可以鏈式寫法

function taskA() {
    console.log("Task A");
}
function taskB() {
    console.log("Task B");
}
function onRejected(error) {
    console.log("Catch Error: A or B", error);
}

var promise = Promise.resolve();
promise
.then(taskA)
.then(taskB)
.catch(onRejected) // 捕獲前面then方法中的異常

5.Promise的靜態方法

1.Promise.resolve 返回一個fulfilled狀態的promise物件

Promise.resolve('hello').then(function(value){
    console.log(value);
});

Promise.resolve(‘hello’);
// 相當於
const promise = new Promise(resolve => {
resolve(‘hello’);
});

2.Promise.reject 返回一個rejected狀態的promise物件

Promise.reject(24);
new Promise((resolve, reject) => {
   reject(24);
});

3.Promise.all 接收一個promise物件陣列為引數

只有全部為resolve才會呼叫 通常會用來處理 多個並行非同步操作

const p1 = new Promise((resolve, reject) => {
    resolve(1);
});

const p2 = new Promise((resolve, reject) => {
resolve(2);
});

const p3 = new Promise((resolve, reject) => {
reject(3);
});

Promise.all([p1, p2, p3]).then(data => {
console.log(data); // [1, 2, 3] 結果順序和promise例項陣列順序是一致的
}, err => {
console.log(err);
});

4.Promise.race 接收一個promise物件陣列為引數

Promise.race 只要有一個promise物件進入 FulFilled 或者 Rejected 狀態的話，就會繼續進行後面的處理。

function timerPromisefy(delay) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
var startDate = Date.now();

Promise.race([
timerPromisefy(10),
timerPromisefy(20),
timerPromisefy(30)
]).then(function (values) {
console.log(values); // 10
});

4. Promise 程式碼實現

/**
 * Promise 實現 遵循promise/A+規範
 * Promise/A+規範譯文:
 * https://malcolmyu.github.io/2015/06/12/Promises-A-Plus/#note-4
 */

// promise 三個狀態
const PENDING = “pending”;
const FULFILLED = “fulfilled”;
const REJECTED = “rejected”;

function Promise(excutor) {
let that = this; // 快取當前promise例項物件
that.status = PENDING; // 初始狀態
that.value = undefined; // fulfilled狀態時 返回的資訊
that.reason = undefined; // rejected狀態時 拒絕的原因
that.onFulfilledCallbacks = []; // 儲存fulfilled狀態對應的onFulfilled函式
that.onRejectedCallbacks = []; // 儲存rejected狀態對應的onRejected函式

function resolve(value) { // value成功態時接收的終值
    if(value instanceof Promise) {
        return value.then(resolve, reject);
    }

    // 為什麼resolve 加setTimeout?
    // 2.2.4規範 onFulfilled 和 onRejected 只允許在 execution context 棧僅包含平臺程式碼時執行.
    // 注1 這裡的平臺程式碼指的是引擎、環境以及 promise 的實施程式碼。實踐中要確保 onFulfilled 和 onRejected 方法非同步執行，且應該在 then 方法被呼叫的那一輪事件迴圈之後的新執行棧中執行。

    setTimeout(() => {
        // 呼叫resolve 回撥對應onFulfilled函式
        if (that.status === PENDING) {
            // 只能由pedning狀態 => fulfilled狀態 (避免呼叫多次resolve reject)
            that.status = FULFILLED;
            that.value = value;
            that.onFulfilledCallbacks.forEach(cb => cb(that.value));
        }
    });
}

function reject(reason) { // reason失敗態時接收的拒因
    setTimeout(() => {
        // 呼叫reject 回撥對應onRejected函式
        if (that.status === PENDING) {
            // 只能由pedning狀態 => rejected狀態 (避免呼叫多次resolve reject)
            that.status = REJECTED;
            that.reason = reason;
            that.onRejectedCallbacks.forEach(cb => cb(that.reason));
        }
    });
}

// 捕獲在excutor執行器中丟擲的異常
// new Promise((resolve, reject) => {
//     throw new Error('error in excutor')
// })
try {
    excutor(resolve, reject);
} catch (e) {
    reject(e);
}

}

/**

  • resolve中的值幾種情況：
  • 1.普通值
  • 2.promise物件
  • 3.thenable物件/函式
    */

/**

  • 對resolve 進行改造增強 針對resolve中不同值情況 進行處理

  • @param {promise} promise2 promise1.then方法返回的新的promise物件

  • @param {[type]} x promise1中onFulfilled的返回值

  • @param {[type]} resolve promise2的resolve方法

  • @param {[type]} reject promise2的reject方法
    */
    function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) { // 如果從onFulfilled中返回的x 就是promise2 就會導致迴圈引用報錯
    return reject(new TypeError(‘迴圈引用’));
    }

    let called = false; // 避免多次呼叫
    // 如果x是一個promise物件 （該判斷和下面 判斷是不是thenable物件重複 所以可有可無）
    if (x instanceof Promise) { // 獲得它的終值 繼續resolve
    if (x.status === PENDING) { // 如果為等待態需等待直至 x 被執行或拒絕 並解析y值
    x.then(y => {
    resolvePromise(promise2, y, resolve, reject);
    }, reason => {
    reject(reason);
    });
    } else { // 如果 x 已經處於執行態/拒絕態(值已經被解析為普通值)，用相同的值執行傳遞下去 promise
    x.then(resolve, reject);
    }
    // 如果 x 為物件或者函式
    } else if (x != null && ((typeof x === ‘object’) || (typeof x === ‘function’))) {
    try { // 是否是thenable物件（具有then方法的物件/函式）
    let then = x.then;
    if (typeof then === ‘function’) {
    then.call(x, y => {
    if(called) return;
    called = true;
    resolvePromise(promise2, y, resolve, reject);
    }, reason => {
    if(called) return;
    called = true;
    reject(reason);
    })
    } else { // 說明是一個普通物件/函式
    resolve(x);
    }
    } catch(e) {
    if(called) return;
    called = true;
    reject(e);
    }
    } else {
    resolve(x);
    }
    }

/**

  • [註冊fulfilled狀態/rejected狀態對應的回撥函式]

  • @param {function} onFulfilled fulfilled狀態時 執行的函式

  • @param {function} onRejected rejected狀態時 執行的函式

  • @return {function} newPromsie 返回一個新的promise物件
    */
    Promise.prototype.then = function(onFulfilled, onRejected) {
    const that = this;
    let newPromise;
    // 處理引數預設值 保證引數後續能夠繼續執行
    onFulfilled =
    typeof onFulfilled === “function” ? onFulfilled : value => value;
    onRejected =
    typeof onRejected === “function” ? onRejected : reason => {
    throw reason;
    };

    // then裡面的FULFILLED/REJECTED狀態時 為什麼要加setTimeout ?
    // 原因:
    // 其一 2.2.4規範 要確保 onFulfilled 和 onRejected 方法非同步執行(且應該在 then 方法被呼叫的那一輪事件迴圈之後的新執行棧中執行) 所以要在resolve里加上setTimeout
    // 其二 2.2.6規範 對於一個promise，它的then方法可以呼叫多次.（當在其他程式中多次呼叫同一個promise的then時 由於之前狀態已經為FULFILLED/REJECTED狀態，則會走的下面邏輯),所以要確保為FULFILLED/REJECTED狀態後 也要非同步執行onFulfilled/onRejected

    // 其二 2.2.6規範 也是resolve函式里加setTimeout的原因
    // 總之都是 讓then方法非同步執行 也就是確保onFulfilled/onRejected非同步執行

    // 如下面這種情景 多次呼叫p1.then
    // p1.then((value) => { // 此時p1.status 由pedding狀態 => fulfilled狀態
    // console.log(value); // resolve
    // // console.log(p1.status); // fulfilled
    // p1.then(value => { // 再次p1.then 這時已經為fulfilled狀態 走的是fulfilled狀態判斷裡的邏輯 所以我們也要確保判斷裡面onFuilled非同步執行
    // console.log(value); // ‘resolve’
    // });
    // console.log(‘當前執行棧中同步程式碼’);
    // })
    // console.log(‘全域性執行棧中同步程式碼’);
    //

    if (that.status === FULFILLED) { // 成功態
    return newPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
    try{
    let x = onFulfilled(that.value);
    resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一個onFulfilled的返回值
    } catch(e) {
    reject(e); // 捕獲前面onFulfilled中丟擲的異常 then(onFulfilled, onRejected);
    }
    });
    })
    }

    if (that.status === REJECTED) { // 失敗態
    return newPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
    try {
    let x = onRejected(that.reason);
    resolvePromise(newPromise, x, resolve, reject);
    } catch(e) {
    reject(e);
    }
    });
    });
    }

    if (that.status === PENDING) { // 等待態
    // 當非同步呼叫resolve/rejected時 將onFulfilled/onRejected收集暫存到集合中
    return newPromise = new Promise((resolve, reject) => {
    that.onFulfilledCallbacks.push((value) => {
    try {
    let x = onFulfilled(value);
    resolvePromise(newPromise, x, resolve, reject);
    } catch(e) {
    reject(e);
    }
    });
    that.onRejectedCallbacks.push((reason) => {
    try {
    let x = onRejected(reason);
    resolvePromise(newPromise, x, resolve, reject);
    } catch(e) {
    reject(e);
    }
    });
    });
    }
    };

/**

  • Promise.all Promise進行並行處理
  • 引數: promise物件組成的陣列作為引數
  • 返回值: 返回一個Promise例項
  • 當這個數組裡的所有promise物件全部變為resolve狀態的時候，才會resolve。
    */
    Promise.all = function(promises) {
    return new Promise((resolve, reject) => {
    let done = gen(promises.length, resolve);
    promises.forEach((promise, index) => {
    promise.then((value) => {
    done(index, value)
    }, reject)
    })
    })
    }

function gen(length, resolve) {
let count = 0;
let values = [];
return function(i, value) {
values[i] = value;
if (++count === length) {
console.log(values);
resolve(values);
}
}
}

/**

  • Promise.race
  • 引數: 接收 promise物件組成的陣列作為引數
  • 返回值: 返回一個Promise例項
  • 只要有一個promise物件進入 FulFilled 或者 Rejected 狀態的話，就會繼續進行後面的處理(取決於哪一個更快)
    */
    Promise.race = function(promises) {
    return new Promise((resolve, reject) => {
    promises.forEach((promise, index) => {
    promise.then(resolve, reject);
    });
    });
    }

// 用於promise方法鏈時 捕獲前面onFulfilled/onRejected丟擲的異常
Promise.prototype.catch = function(onRejected) {
return this.then(null, onRejected);
}

Promise.resolve = function (value) {
return new Promise(resolve => {
resolve(value);
});
}

Promise.reject = function (reason) {
return new Promise((resolve, reject) => {
reject(reason);
});
}

/**

  • 基於Promise實現Deferred的
  • Deferred和Promise的關係
    • Deferred 擁有 Promise
    • Deferred 具備對 Promise的狀態進行操作的特權方法（resolve reject）

*參考jQuery.Deferred
*url: http://api.jquery.com/category/deferred-object/
*/
Promise.deferred = function() { // 延遲物件
let defer = {};
defer.promise = new Promise((resolve, reject) => {
defer.resolve = resolve;
defer.reject = reject;
});
return defer;
}

/**

  • Promise/A+規範測試
  • npm i -g promises-aplus-tests
  • promises-aplus-tests Promise.js
    */

try {
module.exports = Promise
} catch (e) {
}

相關推薦

promiseA+規範及實現

Promise表示一個非同步操作的最終結果。與Promise最主要的互動方法是通過將函式傳入它的then方法從而獲取得Promise最終的值或Promise最終被拒絕（reject）的原因。 1.術語 promise是一個包含了相容promise規範then方法的物件或函式, the

詳解AMD規範及具體實現requireJS在工程中的使用

當前頁 eid 資源 自己 一個數 中比 ocs 網站 重定位 　　由CommonJS組織提出了許多新的JavaScript架構方案和標準，希望能為前端開發提供統一的指引。AMD規範就是其中比較著名一個，全稱是Asynchronous Module Definition

Commonjs規範及Node模組實現

前面的話 　　Node在實現中並非完全按照CommonJS規範實現，而是對模組規範進行了一定的取捨，同時也增加了少許自身需要的特性。本文將詳細介紹NodeJS的模組實現 引入 　　nodejs是區別於javascript的，在javascript中的頂層物件是window，而在node中的頂層物件是

Linux守護程序設計規範及python實現

守護程序 守護程序是生存期長的一種程序。它們獨立於控制終端並且週期性的執行某種任務或等待處理某些發生的事件。他們常常在系統引導裝入時啟動，在系統關閉時終止。unix系統有很多守護程序，大多數伺服器都是用守護程序實現的。比如，網路服務inetd、Web服務http等。同時，

Android中apk動態載入技術研究（2）android插件化及實現

name creat package path iss fontsize 調用 dex con 了解了android中類載入的前期知識點後，來看看android中DexClassLoader詳細的實現 詳細載入流程例如以下： 宿主程序會到文件系統比

字符串函數---atof()函數具體解釋及實現（完整版）

記錄 == include als 技術 整數 ast fill 跳過 atof()函數 atof():double atof(const char *str ); 功 能： 把字符串轉換成浮點數 str：要轉換的字符串。 返回值：每一個函數返回 double 值。此值

關於base64編碼的原理及實現

一個 replace 編碼範圍 func nco 都是 style bit 如果 我們的圖片大部分都是可以轉換成base64編碼的data：image。 這個在將canvas保存為img的時候尤其有用。雖然除ie外，大部分現代瀏覽器都已經支持原生的基於base64的enco

T-Pot平臺Honeytrap蜜罐TCP/UDP服務攻擊探測及實現自動化郵件告警

協議 image 日誌記錄 nbsp ash boa 模擬 記錄 文件 T-pot平臺的Honeytrap可觀察針對TCP或UDP服務的攻擊，作為一個守護程序模擬一些知名的服務，並能夠分析攻擊字符串，執行相應的下載文件指令，當不產生TCP或者UDP協議的時候Honeytra

java設計模式singleton原理及實現

最新 不必要 -- 不同 適合 所有 引用 ati cnblogs 題外話:我要變強，要變強，變強，強。 1、 Singleton的應用場景以及為什麽要使用singleSingleton是一生只能有一個實例的對象。只能由singleton自身創建一個實例。外人是無法創建實例

數據庫的索引類型及實現方式

缺點 mar 訪問速度 eat 散列 主鍵索引 nbsp 常數 col 註:此文復制而來,只為便於學習!1、索引定義 　　數據庫索引好比是一本書前面的目錄，能加快數據庫的查詢速度。索引是對數據庫表中一個或多個列（例如，employee 表的姓氏 (lname) 列）的值進行

Api接口通用安全策略及實現-OSS.Core

參數 num 我會 信息 簽名 算法 活躍度 webapi 參與 　　這篇文章一直說寫，遲遲沒有動手，這兩天看到一些應用接口數據被別人爬蟲、短信接口被人高頻率請求攻擊等案列，感覺簡單概述分享一下接口安全驗證還是有必要的。畢竟當下基本都以客戶端應用為主，如果前期疏忽，發布之後

第34課 棧的概念及實現（上）

操作符 cap ons 順序存儲 異常安全 city const text cte 1. 棧的概念 （1）棧是一種特殊的線性表 （2）棧僅能在線性表的一端進行操作 　　①棧頂（Top）：允許操作的一端 　　②棧底（Bottom）：不允許操作的一端 （3）棧的特性——後進先出

【dubbo基礎】dubbo學習過程、使用經驗分享及實現原理簡單介紹

multi spring配置 不同 影響 為什麽 exception 同事 sock services 一、前言 部門去年年中開始各種改造，第一步是模塊服務化，這邊初選dubbo試用在一些非重要模塊上，慢慢引入到一些稍微重要的功能上，半年時間，學習過程及線上使用遇到的些問

shiro中的reaml理解及實現機制

rmi 我們 身份認證 理解 例子 generated std dbutil sets shiro中的reaml非常重要，所有的身份數據驗證都在reaml中實現。可以把Realm看成DataSource，即安全數據源。 Shiro從Realm

決策樹原理及實現

方式 -1 變化 log nbsp 導致 結點 以及 重要 1、決策樹原理 1.1、定義 分類決策樹模型是一種描述對實例進行分類的樹形結構。決策樹由結點和有向邊組成。結點有兩種類型：內部節點和葉節點，內部節點表示一個特征或屬性，葉節點表示一個類。

ajax獲取json數據及實現跨域請求

cgi size 域名 3.2 方便 nap 不清楚 anti dex 最近想練習一下ajax獲取json數據 , 首先上網找一些在線的可用來測試的接口. -----------------------------------------------------這裏是接口分

UNIX標準及實現

小數 公司 discuss oat 調用 freebsd 文件 user 環境 UNIX 標準 ISO C：意圖是提供C程序的可移植性，使得它能夠適合於大量不同的操作系統。 該標準不僅定義了C程序設計語言的語法和語義，還定義了標準庫 POSIX(P

mysql建表規範及註意事項

關系數據庫 並發 arc float nod 32bit 字符串 8bit 設計 表設計規範 1.庫名，表名，字段名必須使用小寫字母，“-”分割 ，長度不得超過12字符 ， 要見名識意 ； 2.建議使用Innodb存儲引擎 （1）什麽是存儲引擎 不同的技術及配套的相關功

RPC原理及實現

.get 版本 pcs 連接方式 正常 zookeepe list 接口 分布式計算 1 簡介 RPC 的主要功能目標是讓構建分布式計算（應用）更容易，在提供強大的遠程調用能力時不損失本地調用的語義簡潔性。為實現該目標，RPC 框架需提供一種透明調用機制讓使用者不必顯式的

web(五)CSS引入方式，編寫規範及調試

外部 tro ron 執行 編寫 進行 層疊 body 習慣 CSS (Cascading Style Sheets)層疊樣式表 ，是由萬維網聯盟（W3C）制定的標準 CSS的主要作用： 美化html元素的外觀，例如設定背景顏色、字體等。 對網頁元素進行布局、以及定位。