iT邦幫忙

0

Javascript 進階 11-4 Promise Chain 鏈接技巧

  • 分享至 

  • xImage
  •  

這篇文章要介紹的是 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);
    });

https://ithelp.ithome.com.tw/upload/images/20200526/201217706Y3e34EOvv.png

串接多個 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 所回傳的結果嚕!

很神奇吧!

https://ithelp.ithome.com.tw/upload/images/20200526/20121770BlEchgBHos.png

https://ithelp.ithome.com.tw/upload/images/20200526/20121770g5uoeWriT2.png

我們也可以透過這個概念一直鏈接多個 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 也不會執行嚕!

https://ithelp.ithome.com.tw/upload/images/20200526/201217707s36ORjgK1.png

那 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 了!

https://ithelp.ithome.com.tw/upload/images/20200526/20121770WcZkQtsPYn.png

https://ithelp.ithome.com.tw/upload/images/20200526/20121770sbGTME9gob.png

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

在說明這個狀況之前,我們先來介紹,我們所使用的 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 的狀況,再依此進行不同非同步行為的串接。

https://ithelp.ithome.com.tw/upload/images/20200526/20121770GwhpRohYZF.png

以上就是關於 Promise Chain 的串接技巧,如果沒有問題的話就可以往下一篇文章繼續學習嚕!汪汪~


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言