JS核心-(75)-Promise-Promise 常用方法

前言

介紹常用的 Promise 方法

常用的 Promise 方法

首先我們先來看這個範例

// 定義
function promiseFn (num, timeout = 500) {
    return new Promise( (resolve, reject) => {
        setTimeout(() => {
            if (num) {
                resolve(`成功 ${num}`);
            } else {
                reject('失敗');
            }
        }, timeout);
    });
}

// 執行
promiseFn(1, 2000)
    .then((res) => {
        console.log(res);
    }, (rej) => {
        console.log(rej);
    });

執行了以後過了兩秒才出現結果，符合我們的設計預期！

這邊我們把 timeout 的時間改為參數傳入，並且有給予他預設值。

如果我現在要同時發出不同的非同步行為那該怎麼辦？

上一個篇文章，我們介紹到鏈接的方法，等前一個完成之後再執行另一個，那麼如果現在我要同時送出多個非同步的行為的話，

就要使用到 Promise.all 的方法

Promise.all([
    promiseFn(1, 2000),
    promiseFn(2, 500),
    promiseFn(3, 5000)
])
    .then((res) => {
        console.log(res);
    });

使用的方法就是傳入一個陣列，包含你要同時發出請求的 Promise 執行函式，之後等所有的非同步行為都得到結果以後，

就會回傳結果的陣列

這個就是 Promise.all 的基本使用方法，特別要注意的是，如果其中的任一個非同步行為是 reject 的狀態的話，

就會直接進到 catch 的狀態！

// 執行
promiseFn(1, 2000)
    .then((res) => {
        console.log(res);
    }, (rej) => {
        console.log(rej);
    });

Promise.all([
    promiseFn(1, 2000),
    promiseFn(0, 500),
    promiseFn(3, 5000)
])
    .then((res) => {
        console.log(res);
    })
    .catch((rej) => {
        console.log(rej);
    });

---

另外一個比較常用的方法就是 Promise.race() ，基本上，跟 Promise.all() 的使用方法一樣，但 Promise.race() 只會回傳

第一個完成的結果，不論是成功或是失敗。

Promise.race([
    promiseFn(0, 2000),
    promiseFn(2, 500),
    promiseFn(3, 5000)
])
    .then((res) => {
        console.log(res);
    })
    .catch((rej) => {
        console.log(rej);
    });