您好,登錄后才能下訂單哦!
前端一直是距離用戶最近的一層,隨著產(chǎn)品的日益完善,我們會更加注重用戶體驗,而前端異常卻如鯁在喉,甚是煩人。
異常是不可控的,會影響最終的呈現(xiàn)結(jié)果,但是我們有充分的理由去做這樣的事情。
對于?JS
?而言,我們面對的僅僅只是異常,異常的出現(xiàn)不會直接導(dǎo)致?JS
?引擎崩潰,最多只會使當(dāng)前執(zhí)行的任務(wù)終止。
對于前端來說,我們可做的異常捕獲還真不少??偨Y(jié)一下,大概如下:
JS
?語法錯誤、代碼異常AJAX
?請求異常Promise
?異常Iframe
?異常下面我會針對每種具體情況來說明如何處理這些異常。
try-catch
?只能捕獲到同步的運行時錯誤,對語法和異步錯誤卻無能為力,捕獲不到。
1. 同步運行時錯誤:
try {
let name = 'jartto';
console.log(nam);
} catch(e) {
console.log('捕獲到異常:',e);
}
輸出:
捕獲到異常: ReferenceError: nam is not defined
at <anonymous>:3:15
2. 不能捕獲到語法錯誤,我們修改一下代碼,刪掉一個單引號:
try {
let name = 'jartto;
console.log(nam);
} catch(e) {
console.log('捕獲到異常:',e);
}
輸出:
Uncaught SyntaxError: Invalid or unexpected token
不過語法錯誤在我們開發(fā)階段就可以看到,應(yīng)該不會順利上到線上環(huán)境。
3. 異步錯誤
try {
setTimeout(() => {
undefined.map(v => v);
}, 1000)
} catch(e) {
console.log('捕獲到異常:',e);
}
我們看看日志:
Uncaught TypeError: Cannot read property 'map' of undefined
at setTimeout (<anonymous>:3:11)
并沒有捕獲到異常,這是需要我們特別注意的地方。
當(dāng)?JS
?運行時錯誤發(fā)生時,window
?會觸發(fā)一個?ErrorEvent
?接口的?error
?事件,并執(zhí)行?window.onerror()
。
/**
* @param {String} message 錯誤信息
* @param {String} source 出錯文件
* @param {Number} lineno 行號
* @param {Number} colno 列號
* @param {Object} error Error對象(對象)
*/
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常:',{message, source, lineno, colno, error});
}
1. 首先試試同步運行時錯誤
window.onerror = function(message, source, lineno, colno, error) {
// message:錯誤信息(字符串)。
// source:發(fā)生錯誤的腳本URL(字符串)
// lineno:發(fā)生錯誤的行號(數(shù)字)
// colno:發(fā)生錯誤的列號(數(shù)字)
// error:Error對象(對象)
console.log('捕獲到異常:',{message, source, lineno, colno, error});
}
Jartto;
可以看到,我們捕獲到了異常:
2. 再試試語法錯誤呢?
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常:',{message, source, lineno, colno, error});
}
let name = 'Jartto
控制臺打印出了這樣的異常:
Uncaught SyntaxError: Invalid or unexpected token
什么,竟然沒有捕獲到語法錯誤?
3. 懷著忐忑的心,我們最后來試試異步運行時錯誤:
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常:',{message, source, lineno, colno, error});
}
setTimeout(() => {
Jartto;
});
控制臺輸出了:
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。