Promise中then的兩個參數與catch的介紹

JS中的Promise一共有三種狀態，分別爲pending(等待)、fulfilled(成功)、rejected(失敗),
Promise的狀態同一時間只能爲一種狀態。

1.Promise只能由Pending轉化爲fulfilled或者rejected，fulfilled與rejected不能相互轉化

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
})
//輸出結果爲resolve1

var pro=new Promise((resolve,reject)=>{
    reject();
    resolve();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
})
//輸出reject1

如果then添加了第二個參數，這時候就不會執行catch裏面的代碼

2.Promise中的then不添加第二個參數，這時候就會執行catch裏面的代碼

var pro=new Promise((resolve,reject)=>{
    // resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
}).catch(()=>{
    console.log('catch1')
})
//catch1

3.Promise的鏈式結構

Promise的鏈式結構原理是pro.then()或pro.catch()這個函數執行的返回值會返回一個promise對象，所以可以繼續調用then或者catch，來完成鏈式結構。

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
}).then(()=>{
    console.log('resolve2');
},()=>{console.log('reject2')}).catch(()=>{
    console.log('catch2');
}).then(()=>{
    console.log('resolve3');
})
//輸出resolve1 resolve2 resolve3

但是有個重點是"promise執行完畢後返回的promise默認進入fulfilled狀態"，所以執行完畢後默認執行鏈式結構中的resolve回調。

var pro=new Promise((resolve,reject)=>{
    // resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')}).catch(()=>{
    console.log('catch1')
}).then(()=>{
    console.log('resolve2');
},()=>{console.log('reject2')}).catch(()=>{
    console.log('catch2');
}).then(()=>{
    console.log('resolve3');
})
//reject1 resolve2 resolve3

執行進入失敗狀態後，鏈式結構也會執行之後的resolve回調。

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
},()=>{console.log('reject1')).catch(()=>{
    console.log('catch1')
}).catch(()=>{
    console.log('catch2');
})
//輸出結果 resolve1

如果不存在then，則也不會執行catch裏面的代碼，因爲默認進入fullfilled狀態。需要記住的點是，進入什麼狀態就會什麼代碼。

4.then裏面的resolve報錯，catch是可以捕獲報錯信息，then的第二個參數不能捕獲

var pro=new Promise((resolve,reject)=>{
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
    var a = undefined;
    a.b();
    console.log('報錯了的代碼');
},(err)=>{console.log('reject1',err)}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

可以看到，resolve的回調執行報錯可以被catch捕獲到

5.Promise裏面執行的代碼可以被then的第二個參數捕獲到,並且不會進入到resolve，而是直接進入reject

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    reject();
})
pro.then(()=>{
    console.log('resolve1');
    console.log('報錯了的代碼');
},(err)=>{console.log('reject1',err)}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

沒有執行resolve代碼，直接進入了reject

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    console.log('報錯了的代碼reject之前');
    // reject();
    console.log('報錯了的代碼reject之後');
})
pro.then(()=>{
    console.log('resolve1');
    console.log('報錯了的代碼');
},(err)=>{console.log('reject1',err)}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

就算沒有reject回調，還是會進入reject回調
如果不存在then的第二個回調，則會進入catch

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    console.log('報錯了的代碼reject之前');
    reject();
    console.log('報錯了的代碼reject之後');
})
pro.then(()=>{
    console.log('resolve1');
    console.log('報錯了的代碼');
}).catch((err)=>{
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

如果catch的執行過程中報錯，則進入之後相鄰的catch

var pro=new Promise((resolve,reject)=>{
    var a = undefined;
    a.b();
    resolve();
    console.log('報錯了的代碼reject之前');
    reject();
    console.log('報錯了的代碼reject之後');
})
pro.then(()=>{
    console.log('resolve1');
    console.log('報錯了的代碼');
}).catch((err)=>{
    var a = undefined;
    a.b();
    console.log('catch1',err);
}).then(()=>{
    console.log('resolve2');
}).catch(()=>{
    console.log('catch2');
})

未完待續。。。。。。。。。。