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，對作者也是一種勉勵。
參考和一些面試題材料 :
