Promise 是什麼?
Promise是一個ES6的語法,專門用來處理非同步行為,
在以前沒有Promise的時候,我們常用callback 的方式來處理,
但如果要處理的事情很多,callback就會變得不容易閱讀,造成所謂的「callback hell」
而Promise的出現,可以讓我們用更簡潔的寫法來處理非同步的行為,提升可讀性和可維護性。
使用方法
用new Promise建立一個 Promise 物件,
它帶有兩個參數resolve, reject,分別代表成功與失敗,
function myPromise(){
return new Promise((resolve, reject)=>{
})
}
成功後可以用.then()抓取結果,失敗則用.catch()
Demo1
function myPromise(isTrue){
return new Promise(function(resolve, reject) {
window.setTimeout(function() {
if(isTrue){
//成功
resolve('Success');
}else{
//失敗
reject('Fail');
}
}, 0)
})
}
myPromise(true)
.then(res => {
console.log(res)
})
.catch(res => {
console.log(res)
})
結果:Success
如果不帶參數,就會被reject,然後被catch捕捉輸出Fail
Demo2 - Promise Chain
如果我們有多個非同步行為,無法得知每個完成的時間,
但又要讓它們依照順序執行,此時就可以用Promise的then來串接。
//有testA() testB() testC()三個非同步行為,
function testA() {
return new Promise(function(resolve, reject) {
window.setTimeout(function() {
console.log('Success A')
resolve('Success A')
//這裡用Math.random()模擬不定的時間
}, Math.random() * 1000)
})
}
function testB() {
return new Promise(function(resolve, reject) {
window.setTimeout(function() {
console.log('Success B')
resolve('Success B')
}, Math.random() * 1000)
})
}
function testC() {
return new Promise(function(resolve, reject) {
window.setTimeout(function() {
console.log('Success C')
resolve('Success C')
}, Math.random() * 1000)
})
}
testA()
.then(testB)
.then(testC)
Demo3 - Promise.all
接續demo2,假設我是要三個非同步行為都完成後,才做下一件事,
這個時候就可以用Promise.all
Promise.all([
testA(),
testB(),
testC()
])
.then(res => {
console.log(res[0],res[1],res[2])
})
Async/Await
Async/Await底層也是Promise,它其實就是Promise的語法糖而已,看起來更簡潔俐落,更像在寫同步程式碼。
Async,放在function前,意思是宣告是一個非同步函式,並且會回傳一個Promise物件
Await,等待,在收到Promise回應前,後面的程式都會暫時停止
使用方法
//這裡把上面demo2改成async/await的方式撰寫
//建立一個async function
async function myAsync() {
let result;
//當遇到await,async function就會知道要先暫停,等執行完後再跑後面的程式
//這裡就會依序執行testA()->testB()->testC()
result = await testA();
result = await testB();
result = await testC();
}
myAsync();