Promise使用細節

fnngj 發布于2019-08-22 16:31 / 1682人閱讀

摘要：應用把一個異步操作和定時器放在一起。如果定時器先觸發就提示用戶超時用戶超時什么是值穿透或者期望傳入一個函數如果不是函數會發生值穿透和的第二個參數的區別比較類似是一個語法糖相當于還有一點區別就是如果第一個報錯第二個無法捕獲。

Promise使用細節

使用promise需要注意的幾點:

1.如何用promise實現并行的異步 (Promise.all配合.map)

Promise.all()參數 : 一個很多promise組成的數組

Promise.all()返回值 : 當所有異步都執行完后,promise.all的狀態才變成fulfilled,返回一個各個結果組成的數組

       var arr = []
        for ( let i = 0; i < 5; i++ ) {
            arr.push( new Promise( ( resolve ) => {
                setTimeout( () => {
                    console.log( i )
                    resolve("結果：" + i)
                }, i * 1000 )
            } ) )
        }

        
        Promise.all(arr).then(val => {
            console.log(val)
        })

2.用Promise串行的異步

then的鏈式調用

配合forEach或者reduce

3.Promise.race的用法

Promise.race()和all類似,也可以并行,但是它是只要有一個子promise完成了,race()的狀態也就完成了。

應用: 把一個異步操作和定時器放在一起。如果定時器先觸發就提示用戶超時

        let ajaxData = ""
        const ajax = new Promise( ( resolve ) => {
            setTimeout( () => {
                console.log( "ajax" )
                ajaxData = "ajax"
                resolve()
            }, 3000 )
        } )

        const timer = new Promise( ( resolve ) => {
            setTimeout( () => {
                if(ajaxData== ""){
                    console.log( "用戶超時" )
                }else{

                }
                
                resolve()
            }, 2000 )
        } )
        Promise.race( [ timer, ajax ] ).then( (data) => {
            console.log(data)
        } )

4.什么是值穿透?

.then或者.catch期望傳入一個函數,如果不是函數,會發生值穿透

      Promise.resolve(1)
            .then(2)
            .then(3)
            .then(val => {
                console.log(val)
            })

5.catch和then的第二個參數的區別?

比較類似,catch是一個語法糖,相當于then(null,() => {})

還有一點區別就是,如果第一個then報錯,第二個then無法捕獲。catch可以

6.如果catch或者then的第二個參數也拋出異常了,該如何處理?

通過全局添加一個unhandledrejection捕獲Promise異常

window.addEventListener("unhandledrejection", (e) =>{
    console.log(e.reason)
})    

let promise = new Promise((resolve, reject) => {
    reject("Hello World")
});

promise.catch((err) => {
    throw("Unexpected Error");     // Unexpected Error
})

7.為什么then返回的都是Promise對象?

then如果你return的不是promise對象,自動用Promise.resolve包裝一下

then的鏈式調用,并不是通過return this,而是通過每次創造一個新的promise實例

8.一道關于Promise應用的面試題 ：紅燈三秒亮一次，綠燈一秒亮一次，黃燈2秒亮一次；如何讓三個燈不斷交替重復亮燈？（用Promse實現）

        function tip( timer, fn ) {
            return new Promise( resolve => {
                setTimeout( () => {
                    fn()
                    resolve()
                }, timer )
            } )
        }
        
        function step() {
            var d = Promise.resolve()
            d.then( () => {
                    return tip( 3000, () => {
                        console.log( "red" )
                    } )
                } )
                .then( () => {
                    return tip( 1000, () => {
                        console.log( "green" )
                    } )
                } )
                .then( () => {
                    return tip( 2000, () => {
                        console.log( "yellow" )
                    } )
                } )
                .then(() => {
                    step()
                })
        }

        step()

更多文章，可關注https://github.com/ziwei3749/...

如果有疑問或者發現錯誤，可以在相應的 issues 進行提問或勘誤。

如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

參考和一些面試題資料 :

PromiseA+規范

你可能不知道的promise

一道promise面試題

Promise 必知必會（十道題

理解 Promise 的工作原理

JavaScript Promise迷你書（中文版

Node.js最新技術棧之Promise篇

GPU云服務器云服務器 Promise使用細節分析頁面細節細節

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94429.html

深入理解 Promise 實現細節

摘要：顯然，了解的實現細節，可以幫助我們更好地應用它。本文將主要根據的這篇文章，探討的實現細節。核心說明盡管已經有自己的規范，但目前的各類庫，在的實現細節上是有差異的，部分甚至在意義上完全不同。到前面到為止，所實現的都是不能級聯的。在之前的異步JavaScript與Promise一文中，我介紹了Promise以及它在異步JavaScript中的使用意義。一般來說，我們是通過各種JavaSc...

junbaor 2019-08-21 10:27 評論0 收藏0
Promise 規范解讀及實現細節 (二)

摘要：開始前的實現原理已經在規范解讀及實現細節一中說的很清楚了，這里將詳細分析規范中的解析過程，最后會實現一個并提供用于測試的代碼方法分析這里的調用會產生一個新的不同實例對于上一級的終值會作為的參數被傳入對于如果返回一個返回一個那么的狀態和值由決開始前 Promise的實現原理已經在 Promise 規范解讀及實現細節 (一) 中說的很清楚了，這里將詳細分析 Promises/A+規范中...

Michael_Lin 2019-08-21 16:01 評論0 收藏0
Promise 規范解讀及實現細節 (一)

摘要：宏任務和微任務這兩個是指兩個隊列，腳本整體代碼的回調及渲染都會被加入到隊列中回調瀏覽器實現回調都會被加入到隊列。 1. macrotask （宏任務）和 microtask （微任務）這兩個是指兩個隊列，腳本整體代碼、setTimeout、setInterval、setImmediate、I/O、的回調及UI渲染都會被加入到 macrotask 隊列中, process.nextTi...

gougoujiang 2019-08-20 17:51 評論0 收藏0
讀懂 SOLID 的「依賴倒置」原則

這是理解SOLID原則中，關于依賴倒置原則如何幫助我們編寫低耦合和可測試代碼的第一篇文章。寫在前頭當我們在讀書，或者在和一些別的開發者聊天的時候，可能會談及或者聽到術語SOILD。在這些討論中，一些人會提及它的重要性，以及一個理想中的系統，應當包含它所包含的5條原則的特性。我們在每次的工作中，你可能沒有那么多時間思考關于架構這個比較大的概念，或者在有限的時間內或督促下，你也沒有辦法實踐一些好...

Snailclimb 2019-08-22 13:57 評論0 收藏0
從零開始寫一個 Promise 庫

摘要：是什么在規范中，是一個類，它的構造函數接受一個函數。在這種情況下，是但處于狀態。與一起使用關鍵字會暫停執行一個函數，直到等待的變成狀態。此外，會一直等待調用直到下一個時序。原文：Write Your Own Node.js Promise Library from Scratch作者：code_barbarian Promise 已經是 JavaScript 中異步處理的基石，回調...

Binguner 2019-08-22 16:20 評論0 收藏0