Promise (2) 基本方法

来源:http://www.cnblogs.com/luoxiaoer/archive/2017/06/02/6907230.html
-Advertisement-
Play Games

"I'm Captain Jack Sparrow" 加勒比海盜5上映,為了表示對傑克船長的喜愛,昨天閃現了幾次模仿船長的走路姿勢(哈哈哈,簡直妖嬈)。 為了周天能去看電影,要趕緊做完手上的活兒,比如總結Promise的方法。 2 Promise基本方法簡介 Promise提供了哪些方法了?大招就是 ...


"I'm Captain Jack Sparrow"

加勒比海盜5上映,為了表示對傑克船長的喜愛,昨天閃現了幾次模仿船長的走路姿勢(哈哈哈,簡直妖嬈)。

為了周天能去看電影,要趕緊做完手上的活兒,比如總結Promise的方法。

 2 Promise基本方法簡介

Promise提供了哪些方法了?大招就是放圖在控制台輸出Promise。

從圖中結構看,Promise構造函數上實現了all,race,reject,resolve。Promise構造函數的原型上實現了then,catch的方法。構造函數原型上實現then,catch的方法是為了讓Promise構造函數創建的 實例 共用then,catch方法。(此處提一下,實例和構造函數原型之間存在連接,並不是與構造函數存在連接。對構造函數原型和構造函數,實例之間的關係不理解可以看看《javascript高級程式設計》第六章)。 在Promise構造函數上實現的all,race,reject,resolve,不能在對象的實例中訪問,屬於Promise構造函數自己,這樣做保證了對象的命名空間整潔。所以這幾個函數的調用方式是Promise.all(),Promise.race(),Promise.reject(),Promise.resolve()。

Promise簡體實現結構大概是:

//Promise構造函數實現的大概結構
function Promise(resolver) {
    //promise 的初始狀態
    this._PromiseStatus = 'pending';
    //promise 的value 值(不同實現這個屬性名字不一樣)
    this._PromiseValue = undefined
    //......接下來要實現的此處省略
}

//給Promise添加方法
Promise.all = all;
Promise.race = race;
Promise.resolve = resolve;
Promise.reject = reject;

//重寫Promise構造函數原型
Promise.prototype = {
    constructor: Promise,
    then: then,
    catch: catch
};

//方法具體實現
function all( /***/ ) {

}
// ......方法實現省略

使用new 操作符創建 promise對象實際經歷的步驟:(這個摘抄自《javascript高級程式設計》,好書值得多讀幾遍)

  1.創建了一個新的對象。
  2.將構造函數的作用域賦給新對象(因此this就指向了這個新的對象)。
  3.執行構造函數代碼(為這個新對象添加屬性)。
  4.返回新對象。

第三條加粗了可以解釋為什麼all,race,reject,resolve,不能在對象的實例中訪問。all,race,reject,resolve並沒有在構造函數中賦值給新對象的屬性

總結:then,catch方法是供Promise構造函數創建的 實例調用的,all,race,reject,resolve是Promise構造函數自己調用的。(這句描述不是很標準)

 2.1 Promise.prototype.then

⑴.為什麼promise對象需要狀態?(說不清楚就放圖)

var testPromiseStatus = new Promise(function(resolve, reject) {
    //非同步操作......成功後執行了resolve(1)
    resolve(1);
})

//從創建了testPromiseStatus,在到執行testPromiseStatus.then中間的時間間隔不確定

testPromiseStatus.then(function onFulfilled(value) {
    console.log("我到底應該什麼時候執行呀?");
})

//resolver 是你傳遞給Promise構造函數的參數
function Promise(resolver) {
    resolver(function resolvePromise(value) {
        _resolve( /*......*/ , value);
    }, function rejectPromise(reason) {
        _reject( /*......*/ , reason);
    });
}

Promise處理了非同步操作的結果,並提供了規範的介面讓你與之交互(理解Promise的由來)

回到看上圖代碼,非同步操作成功後執行了resolve(1),內部就會執行resolvePromise來調用PromiseStatus.then傳遞進來處理非同步代碼執行結果回調函數onFulfilled,意味著Promise構造函數內部實現resolvePromise是一個延遲的。因為testPromiseStatus有調用then傳遞onFulfilled,至少要讓testPromiseStatus.then先執行將onFulfilled方法傳遞進去後resolvePromise內部才能實現執行onFulfilled。如果PromiseStatus.then沒有傳遞方法,那麼resolvePromise內部只需判定有無onFulfilled函數。簡單的Promise實現,代碼參考自JavaScript Promises ... In Wicked Detail(這篇博文,簡單的去實現了一下Promise)。

function sPromise(resolver) {
    this.callback = null;
    var that = this;

    function resolvePromise(value) {
        //此處非同步的原因就是為了讓callback先被then設置,然後再調用回調
        // giving callback a chance to be set by then()
        setTimeout(function() {
            //判定此時有沒有回調
            if (that.callback) {
                that.callback(value);
            }
        }, 0);
    }
    resolver(resolvePromise);
}
sPromise.prototype = {
    constructor: sPromise,
    then: then
};

function then(onFulfilled) {
    //此處需要添加一個變數判定是將onFulfilled賦值給變數,等待執行
    // 還是直接執行onFulfilled
    //JavaScript Promises ... In Wicked Detail這個博文中指出callback應該是一個數組?可以思考為什麼。
    this.callback = onFulfilled
};

  問題來了!! 如果PromiseStatus已經執行完resolve,即setTimeout已經執行完。此時再調用PromiseStatus.then,then傳遞的回調就不會再執行了所以此時需要給promise對象一個變數標識,promise對象內部是否已經執行了resolve這個非同步操作,因為如果已經執行完那麼then函數內就直接執行傳進來的onFulfilled函數。所以promise對象需要狀態來標識內部的變化,狀態為pending的時候,then裡面的回調onFulfilled就等待非同步調用它,如果狀態為fulfilled,then裡面就直接執行回調函數fulfilled。

參考es6-promise的源碼,會發現它的實現是將回調函數放進一個數組隊列(意味著隊列裡面不一定只有一個函數等待被執行),然後如果promise對象狀態不為pending狀態,就按順序執行這個 數組隊列裡面的回調函數,如果promise對象為pending狀態,就是等待promise對象狀態遷移後再執行這個數組隊列。

 ⑵.為什麼Promise.prototype.then執行它會返回一個新的promise對象?

var aPromise = new promise(function(resolve, reject) {
    resolve("test chain");
});
aPromise.then(function taskA(value) {
    // task A
}).then(function taskB(vaue) {
    // task B
})

返回新的promise對象的原因是為了鏈式操作,使得能以taskA → task B 這種流程進行邏輯處理。即aPromise.then()執行完,返回一個新promise對象,接著執行新promise對象的then方法,為什麼是新的promise對象?因為promise對象需要自己的狀態[[PromiseStatus]]值,每一個還需要自己的 [[PromiseValue]] 值。所以需要返回一個新的promise對象。

 ⑶.thenable對象是個啥?

  類Promise對象,thenable對象擁有名為then方法的對象。所擁有的 then 方法應該和Promise所擁有的 then 方法具有同樣的功能和處理過程。then 調用的回調函數 retuen 一個普通的thenable對象,會先執行thenable對象的then方法,根據then方法內部執行resolve或reject確定[[PromiseValue]]和[[PromiseStatus]],然後將值賦給新的promise對象。可以在控制台執行下圖代碼。

var thenable = {
    then: function(resolve, reject) {
        console.log("thenable");
        reject("thenable");
    }
};
var testPromiseThenable = new Promise(function(resolve, reject) {
    resolve('haha');
}).then(function onFulfilled() {
    //返回一個thenable對象
    return (thenable);
})

總結:Promise的狀態是為瞭解決then方法傳遞的回調是等待被執行(函數隊列),還是立即執行(函數隊列)。Promise的鏈式操作的需求和每一個promise對象都需要自己的狀態,讓then方法返回的總是一個新的promise對象。

then方法執行的回調函數執行return 值(參考至Promises/A+

  ①var promise = Promise.resolve(1); var testPromise = promise.then(null,null)//沒有回調函數,新創建的testPromise 對象的[[PromiseStatus]]和[[PromiseValue]]與之前的promise 的一樣。

  ②值只為普通對象或者原始類型,即將值賦給新創建的promise對象[[PromiseValue]],新創建的promise對象的[[PromiseStatus]]就等於調用then的那個promise對象的[[PromiseStatus]]。

  ③值為promise對象,即將promise對象的[[PromiseValue]]和[[PromiseStatus]],新創建的promise對象對應屬性值。

  ④值為thenable對象,即執行對象的then方法,根據then方法內部執行resolve或reject確定[[PromiseValue]]和[[PromiseStatus]],給新創建的promise對象對應的屬性賦值。

 2.2 Promise.prototype.catch

  Promise.prototype.catch 只是 promise.prototype.then(undefined, onRejected)方法的一個別名而已。 也就是說,這個方法用來註冊當promise對象狀態變為Rejected時的回調函數。摘抄至--《javascript Promise迷離書》

promise.prototype.then(onFulfilled, onRejected)中的onRejected是不會處理同級的onFulfilled的函數的錯誤的,他處理的是前一個promise對象的。傳遞給Promise.prototype.catch 的參數是一個函數,這個函數主要的作用是處理之前的錯誤

⑴.調用catch 乾什麼?

var testPromiseMistake = new Promise(function(resolve, reject) {
    reject("testPromiseMistake")
});
//使用catch 處理錯誤
var rejectPromiseCatch = testPromiseMistake.catch(function onRejected(value) {
        console.log("rejectPromiseCatch:", value)
    })
//使用then處理錯誤
var rejectPromiseThen = testPromiseMistake.then(null, function onRejected (value) {
    console.log("rejectPromiseThen:", value)
})

  上面用catch和then是等價的。catch就是處理之前的promise拋出的異常。

有的文章中說testMistake.catch是不會執行的,因為前面沒有錯誤拋出,會跳過.catch方法。但testMistake.catch它是執行了的,下圖代碼中 testMistake  和 testMistakecatch 是不相等的promise對象,可以在控制台輸出判斷。Promise.prototype.catch 與 promise.prototype.then(undefined, onRejected)方法等價,沒有錯誤時就像執行了then但它的回調函數onFulfilled為null而已。

var testMistake = new Promise(function(resolve, reject) {
    resolve("1")
})
var testMistakecatch = testMistake.catch(function(value) {
    console.log("Catch:", value)
})

 ⑵.catch調用後也會產生新的promise

 

如圖catch之後還是可以調用catch或者then方法的。在then函數中怎麼顯示拋出異常或者在catch中怎麼顯示拋出異常,讓錯誤可以一直傳遞下去?(媽蛋,有錯誤就處理了,還傳遞個毛線呀)這就是後文中提起的Promise.reject();

總結:清楚Promise.prototype.catch 只是 promise.prototype.then(undefined, onRejected)方法的一個別名,懂then的調用那麼catch也不是什麼新方法了。

 2.3 總結

 "I'm Captain Jack Sparrow"

看完加勒比海盜好幾天,這篇學習筆記還是沒寫完。愧疚一把,為了結束,就總結為原型上的方法篇吧。

Promise.prototype.catch和promise.prototype.then 是需要認真理解的方法。理解Promise的狀態,理解then方法調用會返回新的promise對象等等。

ps.  node從7.6版本開始就支持async/await。async/await是一種編寫非同步的新方法,可以讓代碼看起來,表現起來更像同步代碼……優點一堆值得體驗。(當然理解Promise,對理解async/await 是有幫助的)


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

-Advertisement-
Play Games
更多相關文章
  • var result={ "a":{ "x":5, "y":0, "z":0 }, "b":{ "x":0, "y":0, "z":3 }, "c":{ "x":5, "y":0, "z":0 }, ... ...
  • [1]概述 [2]屬性 [3]方法 [4]輸入輸出流 [5]事件 ...
  • 相信碼友們對於$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的瞭解;我闡述一下我自己對於$.fn.custom和$.custom的理解、有理解錯誤或是有更好的建議直接噴我就好! 下麵咱們進行簡單插件的封裝; Jquery為開發插件提供了兩個方法, ...
  • 今天碰到個問題,有個報警提示的聲音,在其他瀏覽器都正常,IE11聲音不出來。後來發現,判斷當前瀏覽器的方法用的是 -1 != navigator.userAgent.indexOf("MSIE") 但是此方法對於新版的IE11已經不支持了(IE11的userAgent里是沒有MSIE標誌的) 把判斷 ...
  • <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>焦點輪播圖效果</title><style type="text/css"> *{ margin: 0; padding: 0; list-style-type: ...
  • 原文參考 玉伯 大神些的,我整理了一下。 咱們今天主題說下前端模塊化發展的歷史,主要就是針對AMD CMD 的發展,這兩個東西是一種規範,他們實際產物是 AMD是RequireJS,CMD的產物是seajs,他們的出現都是在COMMONjs基礎上發展而來的,那咱們得先說說COMMONjs。 COMM ...
  • 1、bootstrap 排版 全局樣式style.css: 1、移除body的margin聲明 2、設置body的背景色為白色 3、為排版設置了基本的字體、字型大小和行高 4、設置全局鏈接顏色,且當鏈接處於懸浮“:hover”狀態時才會顯示下劃線樣式 標題 h1-h6 HTML 中的所有標題標簽, 到 ...
  • 最近在做pc端網頁開發時用到了datatables,不得不說這個工具使用還是很方便的。(ps:大數據量時建議使用伺服器端分頁而非前端分頁) 現將相關配置使用記錄如下 配置 常用api 附加功能添加 向上滾動頁面,當datatables表頭接觸到window頂部將其固定,實現代碼如下: 1、給docu ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...