Promise使用細節

時間 2021-02-16

標籤 html node git github 面試 ajax 數組 promise 異步函數欄目 HTML 简体版

原文原文鏈接

Promise使用細節

使用promise須要注意的幾點:html

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()的狀態也就完成了。node

應用: 把一個異步操做和定時器放在一塊兒。若是定時器先觸發就提示用戶超時git

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指望傳入一個函數,若是不是函數,會發生值穿透github

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/...ajax

若是有疑問或者發現錯誤，能夠在相應的 issues 進行提問或勘誤。數組

若是喜歡或者有所啓發，歡迎 star，對做者也是一種鼓勵。promise

參考和一些面試題資料 :異步