JS核心-(74)-Promise-Promise Chain 鏈接技巧

前言

介紹 Promise Chain

Promise Chain

這裡用到上一篇文章所介紹到的 Promise ，並在 resolved 的狀態時，會使用樣板字面值將傳入的參數也同時顯示出來。

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

// 執行
promiseFn(1)
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    });

串接多個 Promise

有時候我們會需要在請求非同步行為之後再一次的請求非同步行為，造成過多巢狀的問題，這時候我們要進行非同步的串接，

該怎麼做呢？

promiseFn(1)
    .then((res) => {
        console.log(res);
        return promiseFn(2)
    })
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    });

也就是在第一個成功的 then 裡面 return 第二個 Promise 的執行函式，之後再在第一個 then 下方新增第二個 then ，

這樣第二個 then 所承接的結果就是第二個 Promise 所回傳的結果

我們也可以透過這個概念一直鏈接多個 Promise 行為

// 執行
promiseFn(1)
    .then((res) => {
        console.log(res);
        return promiseFn(2)
    })
    .then((res) => {
        console.log(res);
        return promiseFn(3)
    })
    .then((res) => {
        console.log(res);
        return promiseFn(0)
    })
    .then((res) => {
        console.log(res);
        return promiseFn(5)
    })
    .catch((err) => {
        console.log(err);
    });

只要其中一個 Promise 有出錯的話，就會立刻跳到 catch 裡面，後續的 Promise 也就不會執行

那 catch 可不可以繼續練接其他的 Promsie 呢？是可以的喔 ~

// 執行
promiseFn(1)
    .then((res) => {
        console.log(res);
        return promiseFn(2)
    })
    .then((res) => {
        console.log(res);
        return promiseFn(3)
    })
    .then((res) => {
        console.log(res);
        return promiseFn(0)
    })
    .then((res) => {
        console.log(res);
        return promiseFn(5)
    })
    .catch((err) => {
        console.log(err);
        return promiseFn(6)
    })
    .then((res) => {
        console.log(res);
        return promiseFn(0)
    })
    .catch((err) => {
        console.log(err);
    });

只是這樣再接續的 Promise 如果發生 reject 的情形，就要用另一個 catch 來接收錯誤，

也就是屬於另一個 Promise Chain 了

如果說不論成功或是失敗，我都想要進行不同的非同步的處理，該怎麼辦？

在說明這個狀況之前，我們先來介紹我們所使用的 then 其實除了成功的結果之外，也可以接收失敗的結果喔！

promiseFn(0)
    .then((res) => {
        // resolve 成功
        console.log(res);
        return promiseFn(1)
    }, (rej)=> {
        // reject 失敗
        console.log(rej);
        return promiseFn(2)
    })

    .then((res) => {
        // resolve 成功
        console.log(res);
        return promiseFn(6)
    }, (rej)=> {
        // reject 失敗
        console.log(rej);
        return promiseFn(3)
    })

透過同時傳入兩個 callback function，來分別區分 resolve 以及 reject 的狀況，再依此進行不同非同步行為的串接。