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

資訊專欄INFORMATION COLUMN

Promise使用細(xì)節(jié)

fnngj / 1695人閱讀

摘要：應(yīng)用把一個(gè)異步操作和定時(shí)器放在一起。如果定時(shí)器先觸發(fā)就提示用戶超時(shí)用戶超時(shí)什么是值穿透或者期望傳入一個(gè)函數(shù)如果不是函數(shù)會(huì)發(fā)生值穿透和的第二個(gè)參數(shù)的區(qū)別比較類似是一個(gè)語法糖相當(dāng)于還有一點(diǎn)區(qū)別就是如果第一個(gè)報(bào)錯(cuò)第二個(gè)無法捕獲。

Promise使用細(xì)節(jié)

使用promise需要注意的幾點(diǎn):

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

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

Promise.all()返回值 : 當(dāng)所有異步都執(zhí)行完后,promise.all的狀態(tài)才變成fulfilled,返回一個(gè)各個(gè)結(jié)果組成的數(shù)組

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

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

2.用Promise串行的異步

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

配合forEach或者reduce

3.Promise.race的用法

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

應(yīng)用: 把一個(gè)異步操作和定時(shí)器放在一起。如果定時(shí)器先觸發(fā)就提示用戶超時(shí)

        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( "用戶超時(shí)" )
                }else{

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

4.什么是值穿透?

.then或者.catch期望傳入一個(gè)函數(shù),如果不是函數(shù),會(huì)發(fā)生值穿透

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

5.catch和then的第二個(gè)參數(shù)的區(qū)別?

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

還有一點(diǎn)區(qū)別就是,如果第一個(gè)then報(bào)錯(cuò),第二個(gè)then無法捕獲。catch可以

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

通過全局添加一個(gè)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對象,自動(dòng)用Promise.resolve包裝一下

then的鏈?zhǔn)秸{(diào)用,并不是通過return this,而是通過每次創(chuàng)造一個(gè)新的promise實(shí)例

8.一道關(guān)于Promise應(yīng)用的面試題 ：紅燈三秒亮一次，綠燈一秒亮一次，黃燈2秒亮一次；如何讓三個(gè)燈不斷交替重復(fù)亮燈？（用Promse實(shí)現(xiàn)）
        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()

更多文章，可關(guān)注https://github.com/ziwei3749/...

如果有疑問或者發(fā)現(xiàn)錯(cuò)誤，可以在相應(yīng)的 issues 進(jìn)行提問或勘誤。

如果喜歡或者有所啟發(fā)，歡迎 star，對作者也是一種鼓勵(lì)。

參考和一些面試題資料 :

PromiseA+規(guī)范

你可能不知道的promise

一道promise面試題

Promise 必知必會(huì)（十道題

理解 Promise 的工作原理

JavaScript Promise迷你書（中文版

Node.js最新技術(shù)棧之Promise篇

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

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

相關(guān)文章

  • 深入理解 Promise 實(shí)現(xiàn)細(xì)節(jié)

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

    junbaor 評論0 收藏0

  • Promise 規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié) (二)

    摘要：開始前的實(shí)現(xiàn)原理已經(jīng)在規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié)一中說的很清楚了，這里將詳細(xì)分析規(guī)范中的解析過程，最后會(huì)實(shí)現(xiàn)一個(gè)并提供用于測試的代碼方法分析這里的調(diào)用會(huì)產(chǎn)生一個(gè)新的不同實(shí)例對于上一級的終值會(huì)作為的參數(shù)被傳入對于如果返回一個(gè)返回一個(gè)那么的狀態(tài)和值由決 開始前 Promise的實(shí)現(xiàn)原理已經(jīng)在 Promise 規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié) (一) 中說的很清楚了，這里將詳細(xì)分析 Promises/A+規(guī)范 中...

    Michael_Lin 評論0 收藏0

  • Promise 規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié) (一)

    摘要：宏任務(wù)和微任務(wù)這兩個(gè)是指兩個(gè)隊(duì)列，腳本整體代碼的回調(diào)及渲染都會(huì)被加入到隊(duì)列中回調(diào)瀏覽器實(shí)現(xiàn)回調(diào)都會(huì)被加入到隊(duì)列。 1. macrotask （宏任務(wù)）和 microtask （微任務(wù)） 這兩個(gè)是指兩個(gè)隊(duì)列，腳本整體代碼、setTimeout、setInterval、setImmediate、I/O、的回調(diào)及UI渲染都會(huì)被加入到 macrotask 隊(duì)列中, process.nextTi...

    gougoujiang 評論0 收藏0

  • 讀懂 SOLID 的「依賴倒置」原則

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

    Snailclimb 評論0 收藏0

  • 從零開始寫一個(gè) Promise 庫

    摘要：是什么在規(guī)范中，是一個(gè)類，它的構(gòu)造函數(shù)接受一個(gè)函數(shù)。在這種情況下，是但處于狀態(tài)。與一起使用關(guān)鍵字會(huì)暫停執(zhí)行一個(gè)函數(shù)，直到等待的變成狀態(tài)。此外，會(huì)一直等待調(diào)用直到下一個(gè)時(shí)序。 原文：Write Your Own Node.js Promise Library from Scratch作者：code_barbarian Promise 已經(jīng)是 JavaScript 中異步處理的基石，回調(diào)...

    Binguner 評論0 收藏0

發(fā)表評論

0條評論

fnngj

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<