熟悉又陌生的【Promise】

相信你們聽過蕭亞軒的【最熟悉的陌生人】，整首歌曲流露出一種深深的遺憾，曾經本身認爲最熟悉的人，現在陌生的卻像路人同樣。。。。

言盡於此，迴歸正題，最近在寫一個組件的時候，發現本身曾經認爲用的最熟練的 Promise 突然變得陌生起來，我想這仍是因爲自身對 Promise 的認知不夠致使，因此留下本文，以饗讀者。

緣起

引起我從新思考 Promise 用法的是以下一段代碼：

new Promise(resolve=>{
    console.log('p1');
    resolve(1);
}).then(data=>{
    console.log('then1');
    console.log(data);
    throw new Error('error1');
}).catch(err=>{
    console.log(err);
    return 'error1已處理';
}).then(data=>{
    console.log('then2');
    console.log(data);
});
複製代碼

我以前的理解是，一旦 Promise 被 catch 捕獲並執行以後，後續的 then 或者 catch 都不會再執行。 因此，個人理解程序應該輸出以下的結果：

p1
then1 
1
Error: error1
    at <anonymous>
複製代碼

按照我最初的理解，最後一個 then 不會再執行，可是事實倒是執行的，實際打印結果是：

p1
then1
1
Error: error1
    at <anonymous>
then2
error1已處理
複製代碼

看來，我仍是 too young，too simple 了。

上面這個現象說明了 Promise 的一個用法是,catch 只會捕獲到以前 then 的異常, catch 捕獲以後,若是以後仍有 then 任務,仍是會日後繼續執行。

測試

下面幾種例子均以兩個 then 兩個catch，互相銜接。來驗證 Promise 的執行機制。

正常執行

new Promise(resolve=>{
    console.log('p1');
    resolve(1);
}).then(data=>{
    console.log('then1');
    console.log(data);
    return 'then1 返回 2';
    //throw new Error('error1');
}).catch(err=>{
    console.log('接收then1異常', err);
    return 'error1已處理';
}).then(data=>{
    console.log('then2');
    console.log(data);
}).catch(err=>{
    console.log('接收 then2 異常', err);
});
複製代碼

執行過程以下：

結果：

p1
then1
1
then2
then1 返回2
複製代碼

第一個 then 異常。

第一個 then 中拋出異常。

new Promise(resolve=>{
    console.log('p1');
    resolve(1);
}).then(data=>{
    console.log('then1');
    console.log(data);
    throw new Error('error1');
}).catch(err=>{
    console.log('接收then1異常', err);
    return 'error1已處理';
}).then(data=>{
    console.log('then2');
    console.log(data);
}).catch(err=>{
    console.log('接收 then2 異常',err);
});
複製代碼

執行過程以下：

結果：

p1
then1
1
接收then1異常 Error: error1
    at <anonymous>:7:11
then2
error1已處理
複製代碼

第一個 then 異常、緊接着 catch 異常。

new Promise(resolve=>{
    console.log('p1');
    resolve(1);
}).then(data=>{
    console.log('then1');
    console.log(data);
    throw new Error('error1');
}).catch(err=>{
    console.log('接收then1異常', err);
    throw new Error('error1已處理');
}).then(data=>{
    console.log('then2');
    console.log(data);
}).catch(err=>{
    console.log('接收 catch1 異常',err);
});
複製代碼

執行過程以下：

結果：

p1
then1
1
接收then1異常 Error: error1
    at <anonymous>:7:11
接收 catch1 異常 Error: error1已處理
    at <anonymous>:10:11
複製代碼

總結

綜合以上三種常見用法，用四句話簡單總結 Promise 機制：

• then 正常接 then。
• then 異常接 catch。
• catch 正常接 then。
• catch 異常接 catch。

簡短的一片文章，但願能給你們帶來思考，高手能夠略過~~ 勿噴~~