前端JS 異常處理實踐

前端異常處理，常見的場景是在“非同步請求”的操作過程當中，所謂“異常”---就是“不正常”，程式的執行不符合我們的預期。

程式“正常”的處理，是我們在開發過程當中的“重中之重”，是必要的“硬性指標”。

而“異常處理”，很多時候可能連“指標”都沒有，更談不上什麼“硬性指標”了，所以，在開發當中是很容易被忽略的一個“主題”。

但是，“提高使用者體驗”與“提高程式可控性”又是兩個永恆的主題，“枝繁葉茂”就是我們追求的目標（枝---主功能；葉---細節；）。

在追求“枝繁葉茂”的過程當中，“異常處理”就是細節當中的重中之重，故此，對此進行了如下實踐：

常見的“非同步請求”操作：1.ajax（以$.ajax為例）；2.fetch；

此處對這兩種方式的“異常處理”進行了實踐（包括try，catch，finally，throw error，new Error()，console.error的運用），以fetch實踐為主，由於fetch返回的實際上是promise物件，為了方便檢視測試效果，此處直接使用promise物件代替說明。

一.$.ajax相關

$.ajax({
url: "/hello?name=平凡視界",
type: "GET",
success: (data) =>{
//成功相關處理
console.log('返回資料',data)
},
error: (err) =>{
//錯誤相關處理 404屬於該處理（經測試）
//還可能是"timeout", "error", "notmodified" 和 "parsererror"。
console.log('錯誤處理',err);
}
 });

二.fetch相關

實踐1：當程式執行遇到 throw error 時，JS引擎會停止後續業務執行，程式直接進入catch環節；

new Promise((res, rej) =>{
console.log('非同步開始。。。');
setTimeout(() =>{
const error = new Error('粗錯啦～');
throw error; //JS引擎會停止後續業務執行，程式直接進入catch環節
res('非同步OK');
},3000)
 })
 .then((data) =>{
console.log('非同步執行OK',data);//並沒有執行
 },(data) =>{
console.log('非同步執行拒絕',data);//並沒有執行
 })
 .then((data) =>{
console.log('二次then執行OK',data);//並沒有執行
 })
 .catch((err) =>{
console.error('嘿',err);//執行OK
 })

實踐2：當程式 resolve 時，在後續then操作當中註冊的resolve handle會順次執行，註冊的reject handle與catch並未執行；

new Promise((res, rej) =>{
console.log('非同步開始。。。');
setTimeout(() =>{
res('非同步OK');
},3000)
 })
 .then((data) =>{
console.log('非同步執行OK',data);//執行OK
 },(data) =>{
console.log('非同步執行拒絕',data);//並沒有執行
 })
 .then((data) =>{
console.log('二次then執行OK',data);//執行OK
 })
 .catch((err) =>{
console.error('嘿',err);//並沒有執行
 })

實踐3：當程式 reject 時，在後續“子1級”then操作當中註冊的reject handle執行---驗證1，其他註冊的resolve handle與catch並未執行；

new Promise((res, rej) =>{
console.log('非同步開始。。。');
setTimeout(() =>{
rej('非同步失敗');
},3000)
 })
 .then((data) =>{
console.log('非同步執行OK',data);//並沒有執行
 },(data) =>{
console.log('非同步執行拒絕',data);//執行OK
 })
 .then((data) =>{
console.log('二次then執行OK',data);//執行OK
 })
 .catch((err) =>{
console.error('嘿',err);//並沒有執行
 })

實踐4：當程式 reject 時，在後續“子2級”then操作當中註冊的reject handle執行---驗證2（子1級中，並沒有註冊reject handle相關的處理機制，故被在“子2級”then操作當中註冊的reject handle接收，並執行處理），其他註冊的resolve handle與catch並未執行；

new Promise((res, rej) =>{
console.log('非同步開始。。。');
setTimeout(() =>{
rej('非同步失敗');
},3000)
 })
 .then((data) =>{
console.log('非同步執行OK',data);//並沒有執行
 })
 .then((data) =>{
console.log('二次then執行OK',data);//並沒有執行
 },(data) =>{
console.log('二次then"接收"reject非同步"執行結果"(拒絕)',data);//執行OK
 })
 .catch((err) =>{
console.error('嘿',err);//並沒有執行
 })

實踐5：當程式 reject 時，在後續“子4級”then操作當中註冊的reject handle執行---驗證2（“子1級”至“子3級”中，並沒有註冊reject handle相關的處理機制，故被在“子4級”then操作當中註冊的reject handle接收，並執行處理），其他註冊的resolve handle與catch並未執行；

new Promise((res, rej) =>{
console.log('非同步開始。。。');
setTimeout(() =>{
rej('非同步失敗');
},3000)
 })
 .then((data) =>{
console.log('非同步執行OK1',data);//並沒有執行
 })
 .then((data) =>{
console.log('非同步執行OK2',data);//並沒有執行
 })
 .then((data) =>{
console.log('非同步執行OK3',data);//並沒有執行
 })
 .then((data) =>{
console.log('二次then執行OK4',data);//並沒有執行
 },(data) =>{
console.log('二次then"接收"reject非同步"執行結果"(拒絕)',data);//執行OK
 })
 .catch((err) =>{
console.error('嘿',err);//並沒有執行
 })

實踐6：當程式 reject 時，“子1級”至“子4級”中，並沒有註冊reject handle相關的處理機制，故被catch接收，並執行處理，其他註冊的resolve handle並未執行；

new Promise((res, rej) =>{
console.log('非同步開始。。。');
setTimeout(() =>{
rej('非同步失敗');
},3000)
 })
 .then((data) =>{
console.log('非同步執行OK1',data);//並沒有執行
 })
 .then((data) =>{
console.log('非同步執行OK2',data);//並沒有執行
 })
 .then((data) =>{
console.log('非同步執行OK3',data);//並沒有執行
 })
 .then((data) =>{
console.log('非同步執行OK4',data);//並沒有執行
 })
 .catch((err) =>{
console.error('嘿',err);//執行OK-----rej的時候，“其後程式”沒有對rejct進行相應處理時，
//catch會接收該reject響應,並進行處理
 })

三.try，catch，finally，throw error，new Error()，console.error的運用;

try{
console.log("test");
throw new Error('出錯了吧？');//throw 後面的引數，會被catch中的e接收
}
catch(e){
// e == '出錯了吧？'
console.error(e);// 出錯了吧？
}
finally{
console.log('怎麼都會執行');// 執行OK
}

四.總結

try{
#1執行程式碼
}
catch(err){
#1出錯，程式直接進入該環節
}
finally{
#1出錯 or 正常，程式都進入該環節
}