Promise

參考資料:(https://wcc723.github.io/javascript/2017/12/29/javascript-proimse/)

狀態與流程

Promise 主要有幾個狀態

1.pending (一進入Promise 就進入，等待事件完成) 2.fulfilled (正確完成，利用 resolve 來傳送成功的訊息) 3.rejected (已拒絕、操作失敗，利用 reject 來傳送失敗的訊息)

Promise 可以用

.then((data)=>{ //to-do })

.catch((err)=>{ //to-do })

做對應的處理 resolve ---> .then() reject ---> .catch()

單一Promise事件發生

範例:

let mingRunPromise = (someone) => {
    let ran = parseInt(Math.random() * 2);
    console.log(`${someone} 開始跑開始`);
    return new Promise((resolve, reject) => {
        if (ran) {
            setTimeout(function(){
                resolve(`${someone} 跑三秒`);
            }, 3000);
        } else {
            reject(new Error(`${someone} 跌倒失敗`));
        }

    });
}



mingRunPromise('小明').then((data)=> {
    // 成功訊息 (需要 3 秒)
    console.log(data);
}).catch((err)=> {
    // 失敗訊息 (立即)
    console.log(err)
});

多個Promise事件發生

這時候有兩種方式

1.Race

全部同時發生 只吃最快完成的Promise

2.All

全部同時發生 會吃全部的Promise

如果全部都 fulfilled，則會收到一個陣列，裡面有所有Promise resolve 的內容

如果有一個以上的 rejected ，則會吃第一個收到的 reject，之後的不會顯示。 (但所有的Promise 還是會做完)。

Promise.all([dosomething_Promise(5), dosomething_Promise(6), dosomething_Promise(7), dosomething_Promise(5), dosomething_Promise(8), dosomething_Promise(6)]).then((data)=>{
    console.log(data);
}).catch((err)=>{
    console.log(err);
});

第一個 5 6 7 8 都會成功 但因為第二個 5 失敗了， 所以會丟出第二個 5 的 失敗訊息 因為第二個 5 先發生， 所以第二個 6 的失敗訊息丟不出來

3.Chain 鏈接方法

事件依序發生，當一個事件完成之後，下一個事件接續發生。

用此方式可以減少callback 的波動拳問題，也可以依序執行不同的Promise。

dosomething_Promise(5).then( data => {
    console.log(data);
    return dosomething_Promise(6);
}).catch((err)=>{
    console.log(err);
    return err;
}).then( data => {
    console.log(data);
    return dosomething_Promise(7);
}).catch((err)=>{
    console.log(err);
    return err;
}).then( data => {
    console.log(data);
    return dosomething_Promise(5);
}).catch((err)=>{
    console.log(err);
    return err;
}).then( data => {
    console.log(data);
    return dosomething_Promise(8);
}).catch((err)=>{
    console.log(err);
    return err;
}).then( data => {
    console.log(data);
    return dosomething_Promise(6);
}).catch((err)=>{
    console.log(err);
    return err;
});