如何利用Proxy更優(yōu)雅地處理異常詳解
代碼不會(huì)全部按照我們的預(yù)期運(yùn)行，可能會(huì)有意料之外的情況，為了保證程序的健壯性，要進(jìn)行異常處理。
比如一個(gè)對(duì)象的所有方法，都應(yīng)該做異常處理，但是，如果每個(gè)方法都加 try catch 又太麻煩：
const obj = {
aaa() {
try {
// aaa
} catch(e) {
// xxxx
}
},
bbb() {
try {
// bbb
} catch(e) {
// xxxx
}
},
ccc() {
try {
// ccc
} catch(e) {
// xxxx
}
}
}有沒(méi)有一種方式既能對(duì)所有方法做異常處理，又不用重復(fù)寫(xiě)這么多次呢？
有，就是代理模式。
代理模式是通過(guò)對(duì)目標(biāo)對(duì)象做一層包裝，提供和目標(biāo)對(duì)象同名的方法，最終的功能實(shí)現(xiàn)還是調(diào)用目標(biāo)對(duì)象的方法，但可以額外添加一些職責(zé)，比如日志、權(quán)限等，透明地對(duì)目標(biāo)對(duì)象做一些擴(kuò)充。
比如 React 里的高階組件就是代理模式的實(shí)現(xiàn)，可以透明的擴(kuò)展被包裝的組件的功能。
很明顯，這里的異常處理，也可以用代理的方式來(lái)做。但不用完全自己實(shí)現(xiàn)，ES6 提供了 Proxy，可以基于它來(lái)實(shí)現(xiàn)。
定義 createProxy 方法來(lái)實(shí)現(xiàn)代理，創(chuàng)建一個(gè) Proxy 對(duì)象，對(duì)目標(biāo)對(duì)象 target 做一層包裝，定義 get、set 時(shí)的處理：
function createProxy(target) {
const proxy = createExceptionProxy();
return new Proxy(target, {
get: proxy,
set: proxy
});
}
function createExceptionProxy() {
return (target, prop) => {
if (!(prop in target)) {
return;
}
if (typeof target[prop] === 'function') {
return createExceptionZone(target, prop);
}
return target[prop];
}
}如果 target 不包含 prop，就返回空，否則返回對(duì)應(yīng)的屬性值 target[prop]。
如果屬性值是函數(shù)，則做一層包裝:
function createExceptionZone(target, prop) {
return (...args) => {
let result;
ExceptionsZone.run(() => {
result = target[prop](...args);
});
return result;
};
}最終的功能實(shí)現(xiàn)還是調(diào)用 target，傳入?yún)?shù)，把調(diào)用結(jié)果作為代理方法的結(jié)果返回。
包裝這一層的目的是為了做異常處理，也就是 ExceptionsZone.run 做的事情：
class ExceptionsZone {
static exceptionHandler = new ExceptionHandler();
static run(callback) {
try {
callback();
} catch (e) {
this.exceptionHandler.handle(e);
}
}
}調(diào)用目標(biāo)方法，并做 try catch，當(dāng)出現(xiàn)異常的時(shí)候，用 ExceptionHandler 來(lái)處理。
這里的異常處理我們就簡(jiǎn)單打印下日志：
class ExceptionHandler {
handle(exception) {
console.log('記錄錯(cuò)誤：',exception.message, exception.stack);
}
}這樣就實(shí)現(xiàn)了給目標(biāo)對(duì)象的所有方法添加異常處理的目的。
測(cè)試下：
const obj = {
name: 'guang',
say() {
console.log('Hi, I\'m ' + this.name);
},
coding() {
//xxx
throw new Error('bug');
}
coding2() {
//xxx
throw new Error('bug2');
}
}
const proxy = createProxy(obj);
proxy.say();
proxy.coding();這里的 coding、coding2 方法都會(huì)拋出異常，但并沒(méi)有做異常處理，我們用代理給它加上：
我們成功地通過(guò)代理模式給對(duì)象方法添加了異常處理！
但是現(xiàn)在這樣還是有問(wèn)題的，比如我把 coding 方法改為 async 的就不行了：
那怎么辦呢？能不能統(tǒng)一對(duì)異步和同步方法做代理呢？
確實(shí)沒(méi)辦法，因?yàn)闆](méi)法區(qū)分方法是同步還是異步，而且這兩種方法的調(diào)用方式也不同，但我們可以單獨(dú)提供一個(gè) runner 方法來(lái)運(yùn)行這些異步邏輯：
class ExceptionsZone {
static exceptionHandler = new ExceptionHandler();
static async asyncRun(callback) {
try {
await callback();
} catch (e) {
this.exceptionHandler.handle(e);
}
}
}然后這樣運(yùn)行：
(async function() {
await ExceptionsZone.asyncRun(proxy.coding2);
})();這樣就能處理異步邏輯中的異常了：
我們通過(guò)代理的方式給對(duì)象的所有同步方法添加了異常處理，然后又提供了運(yùn)行異步方法的 runner 函數(shù)，對(duì)異步的異常做了處理，結(jié)合這兩種方式，優(yōu)雅地給目標(biāo)對(duì)象的所有方法加上了異常處理。
可能你會(huì)說(shuō)，代理就代理，你定義這么多 class 干啥？
因?yàn)檫@段邏輯是我從 Nest.js 源碼里摘出來(lái)的，它源碼里就是這樣來(lái)給對(duì)象添加異常處理的：
異步邏輯也是單獨(dú)提供了個(gè)方法來(lái)運(yùn)行：
我覺(jué)得這個(gè)透明給對(duì)象添加異常處理的方式很優(yōu)雅，就把它從 Nest.js 源碼里抽了出來(lái)。
完整代碼如下：
function createProxy(target) {
const proxy = createExceptionProxy();
return new Proxy(target, {
get: proxy,
set: proxy
});
}
function createExceptionProxy() {
return (receiver, prop) => {
if (!(prop in receiver)) {
return;
}
if (typeof receiver[prop] === 'function') {
return createExceptionZone(receiver, prop);
}
return receiver[prop];
}
}
function createExceptionZone(receiver, prop) {
return (...args) => {
let result;
ExceptionsZone.run(() => {
result = receiver[prop](...args);
});
return result;
};
}
class ExceptionHandler {
handle(exception) {
console.log('記錄錯(cuò)誤：',exception.message, exception.stack);
}
}
class ExceptionsZone {
static exceptionHandler = new ExceptionHandler();
static run(callback) {
try {
callback();
} catch (e) {
this.exceptionHandler.handle(e);
}
}
static async asyncRun(callback) {
try {
await callback();
} catch (e) {
this.exceptionHandler.handle(e);
}
}
}
const obj = {
name: 'guang',
say() {
console.log('Hi, I\'m ' + this.name);
},
coding() {
//xxx
throw new Error('bug');
},
async coding2() {
//xxx
throw new Error('bug2');
}
}
const proxy = createProxy(obj);
proxy.say();
proxy.coding();
(async function() {
await ExceptionsZone.asyncRun(proxy.coding2);
})();總結(jié)
為了保證健壯性，我們要對(duì)所有可能報(bào)錯(cuò)的代碼添加異常處理，但是每個(gè)方法都添加 try catch 又太麻煩，所以我們利用 Proxy 實(shí)現(xiàn)了代理，透明的給對(duì)象的所有方法都添加上了異常處理。
但是，代理添加的只是同步的異常處理，并沒(méi)有捕獲異步邏輯的異常，我們可以單獨(dú)定義一個(gè)函數(shù)來(lái)運(yùn)行異步方法。
結(jié)合代理 + 提供運(yùn)行異步方法的 runner 這兩種方式，就能給一個(gè)沒(méi)有做任何異常處理的對(duì)象加上異常處理。是不是很優(yōu)雅～
到此這篇關(guān)于如何利用Proxy更優(yōu)雅地處理異常的文章就介紹到這了,更多相關(guān)Proxy更優(yōu)雅處理異常內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個(gè)方法技巧,需要的朋友可以參考下2015-07-07
Javascript 生成指定范圍數(shù)值隨機(jī)數(shù)
查手冊(cè)后才知道, 介紹的信息少得可憐吶, 沒(méi)有介紹生成 m-n 范圍的隨機(jī)數(shù)..., 就只是給你一個(gè) Math.random() 了事.2009-01-01
關(guān)于meta viewport中target-densitydpi屬性詳解（推薦）
這篇文章主要介紹了關(guān)于meta viewport中target-densitydpi屬性詳解，通過(guò)不同的縮放比例實(shí)現(xiàn)了不同的預(yù)覽效果，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
JS面試題大坑之隱式類(lèi)型轉(zhuǎn)換實(shí)例代碼
這篇文章主要介紹了JS面試題大坑之隱式類(lèi)型轉(zhuǎn)換實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
javascript 讀取內(nèi)聯(lián)之外的樣式(style、currentStyle、getComputedStyle區(qū)別介紹
最常用的是style屬性，在JavaScript中，通過(guò)document.getElementById(id).style.XXX就可以獲取到XXX的值，但意外的是，這樣做只能取到通過(guò)內(nèi)嵌方式設(shè)置的樣式值，即style屬性里面設(shè)置的值。2010-05-05
javascript得到XML某節(jié)點(diǎn)的子節(jié)點(diǎn)個(gè)數(shù)的腳本
得到XML某節(jié)點(diǎn)（pnode）的子節(jié)點(diǎn)個(gè)數(shù)（客戶端）2008-10-10
JavaScript實(shí)現(xiàn)復(fù)選框全選和取消全選
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選和取消全選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
javascript圓盤(pán)抽獎(jiǎng)程序?qū)崿F(xiàn)原理和完整代碼例子
JavaScript中Array.from()的超全用法詳解