成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入學(xué)習(xí)Promise調(diào)用鏈

tianren124 / 727人閱讀

摘要：前言使用中，鏈?zhǔn)降恼{(diào)用對于控制異步執(zhí)行很重要。的鏈?zhǔn)秸{(diào)用是支持鏈?zhǔn)秸{(diào)用的，但是它是不同于上面的鏈?zhǔn)?。是調(diào)用方法返回自身，但是是調(diào)用方法后返回一個新的。的運行機制請參考的運行機制值穿透由于通過沒有成功添加回調(diào)函數(shù)，發(fā)生了值穿透。

前言

使用Promise中，鏈?zhǔn)降恼{(diào)用對于控制異步執(zhí)行很重要。

鏈?zhǔn)秸{(diào)用

在jQuery的使用中，我們常常使用下面的代碼

$("#app").show().css("color","red");

這是因為jQuery的對象在調(diào)用上述方法的時候，會return此對象本身, 以方便后面可以繼續(xù)調(diào)用此對象的方法。

jQuery.fn.css = function(prop, value) {
    ......
    return this;
}

jQuery.fn.show = function() {
    ......
    return this;
}
Promise的鏈?zhǔn)秸{(diào)用

Promise是支持鏈?zhǔn)秸{(diào)用的，但是它是不同于上面jQuery的鏈?zhǔn)?。jQeury是調(diào)用方法返回自身，但是Promise是調(diào)用方法后返回一個新的Promise。

const promise = new Promise((resolve, reject) => {
    resolve("ok");
})

const promise$1 = promise.then(() => {console.log()});

promise$1 === promise // false

可以看到上面的promise$1是不等于promise的，如果可以在node.js 或者在瀏覽器中進行斷點調(diào)試的話，還能看到promise$1的初始化狀態(tài)是pending的。

當(dāng)Promise的實例使用then, catch, finally添加完回調(diào)方法以后，會返回一個初始化狀態(tài)為pending的Promise的實例對象。此對象的狀態(tài)我們在外部的程序是無法進行改變的，它的狀態(tài)取決于前面所注冊的回調(diào)方法的執(zhí)行情況。 當(dāng)回調(diào)方法運行正常，沒有產(chǎn)生錯誤或者異常，返回的值除Promise實例與本身(返回本身將會報錯)，返回的Promise的實例對象狀態(tài)會變成resolved， 如果有錯誤或者異常，則會把狀態(tài)變?yōu)閞ejected。當(dāng)然了返回值是Promise的實例對象，那么次Promise實例對象的狀態(tài)取決于返回的Promise實例對象的狀態(tài)。

下圖以then為例展示promise鏈?zhǔn)秸{(diào)用運行的流程

示例分析
1. 調(diào)用鏈then的執(zhí)行順序
const promise$0 = Promise.resolve("resolve_0");
const promise$1 = new Promise((resolve, reject) => {resolve("resolve_1")})
promise$0.then((val) => { console.log(val) }).then(() => { console.log("continue") });
promise$1.then((val) => { console.log(val) });       
       
//輸出結(jié)果: resolve_0  resolve_1  continue

promise$0與promise$1在使用then添加回掉函數(shù)之前，狀態(tài)已經(jīng)從pending變?yōu)閞esolved，它們添加的回掉函數(shù)會被立即添加到Promise的運行隊列，promise$0.then((val) => { console.log(val) })返回的Promise實例需要等待所注冊的回調(diào)函數(shù)成功執(zhí)行完畢以后，此Promise的狀態(tài)才從pending變?yōu)閞esolved。 Promise的運行機制請參考: Promise的運行機制

2. 值穿透
const promise = Promise.resolve("ok");

promise.then().then((val) => {console.log(val)});

// ok

由于promise通過then沒有成功添加回調(diào)函數(shù)，發(fā)生了值穿透。

3. 狀態(tài)傳遞
const promise = Promise.resolve("complete");

promise.then((val) => { 
    return new Promise ((resolve) => { 
             resolve(val)
            console.log(val, 1); 
        })
    })
    .then((val) => {console.log(val, 2)})
// complete 1 complete 2

我們把Promise暫命名(Pa), 通過promise.then返回的Promise(暫命名Pb), Pb狀態(tài)需要根據(jù)Pathen所注冊回調(diào)方法的運行，其回調(diào)方法返回一個新的Promise(暫命名Pc)，由于返回的是Promise。Pb的狀態(tài)變成取決于Pc的狀態(tài), 當(dāng)Pc的狀態(tài)變化為resolved以后，Pb的狀態(tài)也變化為resolved。

4. 巧妙的異常處理
var promise = Promise.resolve("ok");

promise.then(() => {
    throw new Error("error");
}).then(() => {
    console.log("continue");
}).then(() => {
    console.log("again");
}).catch(() => {

}).then(() => {
  console.log("completed")
})
// completed

在then所注冊的回調(diào)方法，發(fā)生異常以后，后續(xù)的Promise調(diào)用鏈的狀態(tài)都是rejected，導(dǎo)致后續(xù)的then(resolve)不會被推入Promise的運行隊列，也就不會被運行，直到這個錯誤被then(,reject) 或者catch捕獲。 而使用(then(,reject)) 或者catch注冊回調(diào)方法又會返回一個新的Promise，此Promise的狀態(tài)又只與它們所注冊的回調(diào)方法的執(zhí)行相關(guān)。不會受到前面的影響。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94313.html

相關(guān)文章

  • JS筆記

    摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復(fù)雜性。異步編程入門的全稱是前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。 TypeScript 入門教程 從 JavaScript 程序員的角度總結(jié)思考，循序漸進的理解 TypeScript。 網(wǎng)絡(luò)基礎(chǔ)知識之 HTTP 協(xié)議 詳細(xì)介紹 HTT...

    rottengeek 評論0 收藏0

  • 一起來學(xué)Promise

    摘要：參數(shù)如前面所提到的，方法只是方法的一個語法糖，原因就在于方法的參數(shù)為實際上是兩個回調(diào)函數(shù)，分別用于處理調(diào)用它的對象的和狀態(tài)，而方法就等價于狀態(tài)處理函數(shù)。對象狀態(tài)傳遞和改變的方法利用回調(diào)的返回值，可以控制某個操作后方法返回的對象及其狀態(tài)。 注意，本文主要針對ES6標(biāo)準(zhǔn)實現(xiàn)的Promise語法進行闡述，實例代碼也都使用ES6語法，快速入門ES6請參見ECMAScript 6 掃盲。 一分鐘...

    liaoyg8023 評論0 收藏0

  • JavaScript是如何工作的:事件循環(huán)和異步編程的崛起+ 5種使用 async/await 更

    摘要：事件循環(huán)從回調(diào)隊列中獲取并將其推入調(diào)用堆棧。執(zhí)行從調(diào)用堆棧中移除從調(diào)用堆棧中移除快速回顧值得注意的是，指定了事件循環(huán)應(yīng)該如何工作，這意味著在技術(shù)上它屬于引擎的職責(zé)范圍，不再僅僅扮演宿主環(huán)境的角色。 此篇是 JavaScript是如何工作的第四篇，其它三篇可以看這里： JavaScript是如何工作的：引擎，運行時和調(diào)用堆棧的概述！ JavaScript是如何工作的：深入V8引擎&編寫...

    Honwhy 評論0 收藏0

  • JavasScript重難點知識

    摘要：忍者級別的函數(shù)操作對于什么是匿名函數(shù)，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數(shù)是一個很重要且具有邏輯性的特性。通常，匿名函數(shù)的使用情況是創(chuàng)建一個供以后使用的函數(shù)。 JS 中的遞歸 遞歸, 遞歸基礎(chǔ), 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加 這一次，徹底弄懂 JavaScript 執(zhí)行機制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果...

    forsigner 評論0 收藏0

  • 深入理解ES6筆記（十一）Promise與異步編程

    摘要：回調(diào)函數(shù)模式類似于事件模型，因為異步代碼也會在后面的一個時間點才執(zhí)行如果回調(diào)過多，會陷入回調(diào)地獄基礎(chǔ)可以當(dāng)做是一個占位符，表示異步操作的執(zhí)行結(jié)果。函數(shù)可以返回一個，而不必訂閱一個事件或者向函數(shù)傳遞一個回調(diào)函數(shù)。 主要知識點：Promise生命周期、Promise基本操作、Promise鏈、響應(yīng)多個Promise以及集成PromiseshowImg(https://segmentfaul...

    RayKr 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<