JavaScript之Promise對象

来源:https://www.cnblogs.com/laixiangran/archive/2018/04/19/8885806.html
-Advertisement-
Play Games

含義 Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了 Promise 對象。 Promise 對象是一個代理對象（代理一個值），被代理的值在 Promise 對象創建時可能是未 ...


含義

Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了 Promise 對象。

Promise 對象是一個代理對象（代理一個值），被代理的值在 Promise 對象創建時可能是未知的。它允許你為非同步操作的成功和失敗分別綁定相應的處理方法（handlers）。 這讓非同步方法可以像同步方法那樣返回值，但並不是立即返回最終執行結果，而是一個能代表未來出現的結果的 Promise 對象。

Promise 對象有以下兩個特點：

  1. 對象的狀態不受外界影響。Promise 對象代表一個非同步操作，有三種狀態：pending（進行中）、fulfilled（已成功） 和 rejected（已失敗）。只有非同步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。
  2. 一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise 對象的狀態改變，只有兩種可能：從 pending 變為 fulfilled 和 從 pending 變為 rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱為 resolved（已定型）。如果改變已經發生了，你再對 Promise 對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。

基本用法

new Promise( function(resolve, reject) {...} /* executor */  );

Promise 對象的初始化接收一個執行函數 executor，executor 是帶有 resolve 和 reject 兩個參數的函數 。

Promise 構造函數執行時會立即調用 executor 函數， resolve 和 reject 兩個函數作為參數傳遞給 executor（executor 函數在 Promise 構造函數返回新建對象前被調用）。

resolve 和 reject 函數被調用時，分別將 promise 的狀態改為 fulfilled（完成） 或 rejected（失敗）。executor 內部通常會執行一些非同步操作，一旦完成，可以調用 resolve 函數來將 promise 狀態改成 fulfilled，或者在發生錯誤時將它的狀態改為 rejected。

如果在 executor 函數中拋出一個錯誤，那麼該 promise 狀態為 rejected。executor函數的返回值被忽略。

先看個示例：（註：後文的示例均使用 setTimeout 模擬非同步操作）

// 從 pending 變為 fulfilled
var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');
        resolve('promise fulfilled！');
    }, 500);
}).then(function(data) {
    console.log(data);
});
// Hi,
// promise fulfilled！

// 從 pending 變為 rejected
var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');
        reject('promise rejected！');
    }, 500);
}).then(null, function(error) {
    console.log(error);
});
// Hi,
// promise rejected！

解釋一下 從 pending 變為 fulfilled 這段代碼，當執行 new Promise() 時，傳入的執行函數就立即執行了，此時其內部有一個非同步操作（過 500ms 之後執行），等過了 500ms 之後先執行 console.log('Hi,'); 輸出 Hi,，此時 promise 的狀態為 pending（進行中），而執行 resolve('Promise！'); 則修改 promise 的狀態為 fulfilled（完成），然後我們調用 then() 接收 promise 在 fulfilled 狀態下傳遞的值，此時輸出 'Promise！'。

同理，從 pending 變為 rejected 這段代碼基本差不多，不同的是非同步操作調用了 reject 方法，then 方法使用第二個參數接收 rejected 狀態下傳遞的值。

Promise.prototype.then()

then 的作用是為 Promise 實例添加狀態改變時的回調函數。

then 方法的第一個參數是 resolved 狀態的回調函數，第二個參數（可選）是 rejected 狀態的回調函數。

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');

        // 模擬請求，請求狀態為200代表成功，不是200代表失敗
        if (status === 200) {
            resolve('promise fulfilled！');
        } else {
            reject('promise rejected！');
        }
    }, 500);
}).then(function(data) {
    console.log(data);
}, function(error) {
    console.log(error);
});
// 如果調用 resolve 方法，輸出如下：
// Hi,
// promise fulfilled！

// 如果調用 reject 方法，輸出如下：
// Hi,
// promise rejected！

then 方法返回的是一個新的 Promise 實例（註意，不是原來那個Promise實例）。因此可以採用鏈式寫法，即 then 方法後面再調用另一個 then 方法。採用鏈式的 then，可以指定一組按照次序調用的回調函數。這時，前一個回調函數，有可能返回的還是一個 Promise 對象（即有非同步操作），這時後一個回調函數，就會等待該 Promise 對象的狀態發生變化，才會被調用。

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');
        resolve();
    }, 500);
}).then(function() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            // 模擬請求，請求狀態為200代表成功，不是200代表失敗
            if (status === 200) {
                resolve('promise fulfilled！');
            } else {
                reject('promise rejected！');
            }
        });
    })
}).then(function(data) {
    console.log(data);
}, function(error) {
    console.log(error);
});
// 如果第一個 then 調用 resolve 方法，第二個 then 調用第一個回調函數，最終輸出如下：
// Hi,
// promise fulfilled！

// 如果第一個 then 調用 reject 方法，第二個 then 調用第一個回調函數，最終輸出如下：
// Hi,
// promise rejected！

Promise.prototype.catch()

catch 方法是.then(null, rejection)的別名，用於指定發生錯誤時的回調函數。

所以下麵代碼：

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');

        // 模擬請求，請求狀態為200代表成功，不是200代表失敗
        if (status === 200) {
            resolve('promise fulfilled！');
        } else {
            reject('promise rejected！');
        }
    }, 500);
}).then(function(data) {
    console.log(data);
}, function(error) {
    console.log(error);
});

等價於：

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');

        // 模擬請求，請求狀態為200代表成功，不是200代表失敗
        if (status === 200) {
            resolve('promise fulfilled！');
        } else {
            reject('promise rejected！');
        }
    }, 500);
}).then(function(data) {
    console.log(data);
}).catch(function(error) {
    console.log(error);
});

如果沒有使用 catch 方法或者 then 第二個參數指定錯誤處理的回調函數，Promise 對象拋出的錯誤不會傳遞到外層代碼，即不會有任何反應，這跟傳統的 try/catch 代碼塊是不同。

catch 方法返回的還是一個 Promise 對象，因此後面還可以接著調用 then 方法。

catch 方法與 .then(null, rejection) 的不同：

  • 如果非同步操作拋出錯誤，狀態就會變為 rejected，就會調用 catch 方法指定的回調函數，處理這個錯誤。
  • then 方法指定的回調函數，如果運行中拋出錯誤，也會被 catch 方法捕獲。
  • catch 方法的寫法更接近同步的寫法（try/catch）。

因此，建議總是使用 catch 方法，而不使用 then 方法的第二個參數。

Promise.prototype.finally()

finally 方法用於指定不管 Promise 對象最後狀態如何，都會執行的操作。該方法是 ES2018 引入標準的。

var p = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log('Hi,');

        // 模擬請求，請求狀態為200代表成功，不是200代表失敗
        if (status === 200) {
            resolve('promise fulfilled！');
        } else {
            reject('promise rejected！');
        }
    }, 500);
}).then(function(data) {
    console.log(data);
}).catch(function(error) {
    console.log(error);
}).finally(function() {
    console.log('I am finally！');
});

上面代碼中，不管 promise 最後的狀態，在執行完 then 或 catch 指定的回調函數以後，都會執行 finally 方法指定的回調函數。

Promise.all()

Promise.all 方法用於將多個 Promise 實例，包裝成一個新的 Promise 實例。

var p = Promise.all([p1, p2]);

上面代碼中，Promise.all 方法接受一個數組作為參數，p1、p2 都是 Promise 實例，如果不是，就會先調用下麵講到的 Promise.resolve 方法，將參數轉為 Promise 實例，再進一步處理。（Promise.all方法的參數可以不是數組，但必須具有 Iterator 介面，且返回的每個成員都是 Promise 實例。）

p的狀態由p1、p2決定，分成兩種情況。

（1）只有 p1、p2 的狀態都變成 fulfilled，p 的狀態才會變成 fulfilled，此時 p1、p2 的返回值組成一個數組，傳遞給 p 的回調函數。

（2）只要 p1、p2 之中有一個被 rejected，p 的狀態就變成 rejected，此時第一個被 reject 的實例的返回值，會傳遞給 p 的回調函數。

示例：

試想一個頁面聊天系統，我們需要從兩個不同的 URL 分別獲得用戶的個人信息和好友列表，這兩個任務是可以並行執行的，用Promise.all()實現。

// 並行執行非同步任務
var p1 = new Promise(function (resolve, reject) {
    setTimeout(function() {
        // 模擬請求，請求狀態為200代表成功，不是200代表失敗
        if (status === 200) {
            resolve('P1');
        } else {
            reject('error');
        }
    }, 500);
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同時執行p1和p2，併在它們都完成後執行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 輸出：['P1', 'P2']
}).catch(function(error) {
    console.log(error); // 如果p1執行失敗，則輸出：error
});

註意，如果作為參數的 Promise 實例，自己定義了 catch 方法，那麼它一旦被 rejected，並不會觸發 Promise.all() 的 catch 方法。

Promise.race()

Promise.race 方法同樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。

var p = Promise.race([p1, p2]);

上面代碼中，只要 p1、p2 之中有一個實例率先改變狀態，p 的狀態就跟著改變。那個率先改變的 Promise 實例的返回值，就傳遞給 p 的回調函數。

Promise.race 方法的參數與 Promise.all 方法一樣，如果不是 Promise 實例，就會先調用下麵講到的 Promise.resolve 方法，將參數轉為 Promise 實例，再進一步處理。

示例：

有些時候，多個非同步任務是為了容錯。比如，同時向兩個 URL 讀取用戶的個人信息，只需要獲得先返回的結果即可。這種情況下，用Promise.race()實現。

// 多任務容錯
var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 400, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P2'
});

Promise.resolve()

有時需要將現有對象轉為 Promise 對象，Promise.resolve 方法就起到這個作用。

Promise.resolve方法的參數分成四種情況：

（1）參數是一個 Promise 實例

如果參數是 Promise 實例，那麼Promise.resolve將不做任何修改、原封不動地返回這個實例。

（2）參數是一個 thenable 對象

thenable 對象指的是具有 then 方法的對象，比如下麵這個對象。

var thenable = {
    then: function (resolve, reject) {
        resolve(42);
    }
};

Promise.resolve 方法會將這個對象轉為 Promise 對象，然後就立即執行 thenable 對象的 then 方法。

var thenable = {
    then: function (resolve, reject) {
        resolve(42);
    }
};

var p1 = Promise.resolve(thenable);
p1.then(function (value) {
    console.log(value);  // 42
});

上面代碼中，thenable 對象的 then 方法執行後，對象 p1 的狀態就變為 resolved，從而立即執行最後那個 then 方法指定的回調函數，輸出 42。

（3）參數不是具有 then 方法的對象，或根本就不是對象

如果參數是一個原始值，或者是一個不具有 then 方法的對象，則 Promise.resolve 方法返回一個新的 Promise 對象，狀態為 resolved。

var p = Promise.resolve('Hello');

p.then(function (s) {
    console.log(s)
});
// 'Hello'

var p1 = Promise.resolve(true);

p1.then(function (b) {
    console.log(b)
});
// true

var p2 = Promise.resolve(1);

p1.then(function (n) {
    console.log(n)
});
// 1

（4）不帶有任何參數

Promise.resolve 方法允許調用時不帶參數，直接返回一個 resolved 狀態的 Promise 對象。

所以，如果希望得到一個 Promise 對象，比較方便的方法就是直接調用 Promise.resolve 方法。

Promise.reject()

Promise.reject 方法也會返回一個新的 Promise 實例，該實例的狀態為 rejected。

註意，Promise.reject 方法的參數，會原封不動地作為 reject 的參數，變成後續方法的參數。這一點與 Promise.resolve 方法不一致。

var thenable = {
    then(resolve, reject) {
        reject('出錯了');
    }
};

Promise.reject(thenable)
    .catch(e = > {
    console.log(e === thenable)
})
// true

上面代碼中，Promise.reject 方法的參數是一個 thenable 對象，執行以後，後面 catch 方法的參數不是 reject 拋出的 出錯了 這個字元串，而是 thenable 對象。

應用

載入圖片

我們可以將圖片的載入寫成一個 Promise，一旦載入完成，Promise 的狀態就發生變化。

function (path) {
    return new Promise(function (resolve, reject) {
        const image = new Image();
        image.onload = resolve;
        image.onerror = reject;
        image.src = path;
    });
};

封裝ajax

我們可以將 ajax 請求寫成一個 Promise，根據請求的不同狀態改變 Promise 的狀態。

function ajax(method, url, data) {
    var request = new XMLHttpRequest();
    return new Promise(function (resolve, reject) {
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject(request.status);
                }
            }
        };
        request.open(method, url);
        request.send(data);
    });
}

總結

優點：

  • 可以將非同步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數（回調地獄）。
  • 在非同步執行的流程中，可以把執行代碼和處理結果的代碼清晰地分離開來。

缺點：

  • 無法取消 Promise，一旦新建它就會立即執行，無法中途取消。
  • 如果不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。
  • 當處於 pending 狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

http://es6.ruanyifeng.com/#docs/promise

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jest 自動化測試
    概述 jest 是 facebook 開源的，用來進行單元測試的框架，可以測試 javascipt 和 react。 單元測試各種好處已經被說爛了，這裡就不多扯了。重點要說的是，使用 jest, 可以降低寫單元測試的難度。 單元測試做得好，能夠極大提高軟體的質量，加快軟體迭代更新的速度， 但是，單元 ...
  • 21天網站建設實錄 (雨辰資訊) 高清pdf掃描版​
    《21天網站建設實錄》以網頁設計師的項目開發為背景，以“阿裡里線上購物”商業網站的開發過程為流程，通過21天的任務期限，以一天一項任務、一天掌握一項技能項目實戰的學習模式，全面講解了一個網站立項、策劃、製作、完善、優化、上傳及維護等環節的完整過程，詳細敘述了商業網站開發的一般性知識和網站建設所涉及的 ...
  • HTML5游戲開發 PDF掃描版​
    很多從事Web前端開發的人對HTML總有些不滿，比如需要手動檢查和設計很多格式代碼，不僅容易出錯，而且存在大量重覆。好在HTML5讓我們看到了曙光。作為下一代Web開發標準，HTML5成為主流的日子已經不遠。它對音頻視頻、表單驗證、事件處理、繪圖等的支持都讓我們非常期待，視頻音頻的播放、表單檢查和提 ...
  • HTML5與CSS3基礎教程(第7版) 高清PDF掃描版​
    HTML5與CSS3基礎教程（第7版）試讀不僅介紹了文本、圖像、鏈接、列表、表格、表單、多媒體等網頁元素，也介紹瞭如何為網頁設計結構、佈局，添加動態效果、格式化等形式，此外還涉及調試和發佈、聚合和吸引訪問等。書中詳細講解了視頻、音頻及其他新增特性，從零開始教會讀者創建漸進增強的普適性網站。書中提供了 ...
  • HTML5與CSS3基礎教程(第8版) PDF掃描版​
    《HTML5與CSS3基礎教程(第8版)》自第1版至今，一直是講解HTML和CSS入門知識的經典暢銷書，全面系統地闡述HTML5和CSS3基礎知識以及實際運用技術，通過大量實例深入淺出地分析了網頁製作的方方面面。最新第8版不僅介紹了文本、圖像、鏈接、列表、表格、表單等網頁元素，還介紹瞭如何為網頁設計 ...
  • 一行JS搞定快速關機
    一、在本地新建一個文件js文件 JS代碼： 二、設置快捷鍵 將上述js文件設置一個快捷鍵到桌面，然後點擊文件屬性設置快捷鍵，你可以使用任何和其他快捷鍵不同的組合鍵。如下圖： 三、效果 在桌面按下方纔設置的快捷鍵，如同時按下Ctrl、Alt和left鍵，效果如下： 按回車即可進行電腦的快速關機。 四、 ...
  • touch和click優先性
    jQuery的touch事件是當用戶觸摸事件（頁面）時觸發的。 jQuery的click事件是當用戶點擊元素時觸發的。 而事件執行流程是手指點擊一個元素，會經過：touchstart --> touchmove -> touchend --》click。所以在觸發touch事件時，預設會自動觸發cl ...
  • tooltip.css-2.0文檔
    tooltip.css 純CSS滑鼠提示工具。 v. 2.0.0 更新日期：2018.4.12 預覽DEMO。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類