Promise

• Promise.all()：等待裡面的都完成才回傳，因為是全部完成，所以會是陣列，失敗就是回傳失敗那個
• Promise.race()：等待裡面的第一筆完成就回傳

Promise 例子

// 有機率失敗
function test1 (name, time){
    return new Promise((resolve, reject)=>{
    setTimeout(()=>{
        if(Math.random() > 0.5){
            resolve(`${name}: success`)
        }
        else{
            reject(`${name}: error`)
        }
    }, time)
    })
}

// 一定成功
function test2 (name, time){
    return new Promise((resolve, reject)=>{
    setTimeout(()=>{
        if(true){
            resolve(`${name}: success`)
        }
        else{
            reject(`${name}: error`)
        }
    }, time)
    })
}

Promise.all

// 有機率失敗
Promise.all([test1('a',1000),test1('b',2000),test1('c',3000)]).then((data)=>{
    console.log(data);
}).catch((error)=>{
    console.log(error);
})
// 成功回傳 ['a: success', 'b: success', 'c: success']
// 失敗回傳 a: error or b: error or c: error 其中一種

// 一定成功
Promise.all([test2('a',1000),test2('b',2000),test2('c',3000)]).then((data)=>{
    console.log(data);
}).catch((error)=>{
    console.log(error);
})
// 成功回傳 ['a: success', 'b: success', 'c: success']

Promise.race

// 有機率失敗
Promise.race([test1('a',1000),test1('b',2000),test1('c',3000)]).then((data)=>{
    console.log(data);
}).catch((error)=>{
    console.log(error);
})
// 成功回傳 a: success
// 失敗回傳 a: error

參考資料

MDN 使用 Promise
MDN Promise
鐵人賽：使用 Promise 處理非同步
JavaScript Promise 全介紹
JS 原力覺醒 Day14 - 一生懸命的約定：Promise
JavaScript基本功修練：Day25 - Promise
從Promise開始的JavaScript異步生活
Promise 與 Opendata
JavaScript 同步延遲 ( Promise + setTimeout )
JavaScript | 從Promise開始承諾的部落格生活

次回

再稍微 Promise 一下