对于es6的Proxy其实早有了解但是一直没有发现它的用武之地。直到这次项目中需要解决一个请求拦截的问题才发现原来这个Proxy可以这么赞。
先抛出问题吧，项目使用的angularjs ，由两个项目A和B融合因为B需要拦截请求对response作统一处理，所以首先想到了$httpProver但是这样会引发一个问题会对A的请求也做处理，这个时候proxy便起到作用了。在开始讲解解决方案前先熟悉下Proxy的使用

what?

Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

how?

语法:

const p = new Proxy(target, handler)

参数：

target: 需要代理的目标对象，可以是对象，数组，函数，一个代理对象
handler 具体的处理对象

handler:

get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。 isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

了解完基本用法之后我们可以看下开头我们说的问题使用proxy就可以很好的解决附上代码

import injector from 'angular-es-utils/injector/index';
import Message from './message';

export const handlerQueue = [];

handlerQueue.push(data => {
	['$resolved', '$promise'].forEach(key => delete data[key]);
	return data;
});

function handlerError(e, reject) {
	const { status, data = {}, statusText } = e;
	const errorStatus = [400, 500];

	if (errorStatus.includes(status)) {
		const { description } = data;
		Message({ msg: description || statusText });
	}
	reject(e);
}

function nodeGenResource(...uri) {

	const resource = genResource(...uri);

	return new Proxy(resource, {

		get(target, key, receiver) {

			const $q = injector.get('$q');

			return (...params) => {

				const deferred = $q.defer();

				Reflect.get(target, key, receiver)(...params).$promise
					.then(res => deferred.resolve(handlerQueue.reduce((d, fn) => fn(d), res)))
					.catch(e => handlerError(e, deferred.reject));

				return { $promise: deferred.promise };
			};
		},
		set(target, key, value, receiver) {
			return Reflect.set(target, key, value, receiver);
		}
	});
}

export default nodeGenResource;

扩展：使用proxy实现双向绑定

<html>
<head>
	<title>proxy 实现一个双向bing</title>
</head>
<body>
	<input vm='name'>
	<span bind='name'><span>
</body>
<script type="text/javascript">
	(function() {

		var ViewModel = new Proxy(function() {}, {
		    construct(target, args, newTarget) {
		    	const el = args[0];
		    	const key = el.getAttribute('vm');

		    	const binds = document.querySelectorAll(`[bind=${key}]`);
		    	const bindsEl = Array.from(binds);

		        const instance = new target(...args);

		        const proxy = new Proxy(instance, {
						get(target, key, receiver) {
			    			return Reflect.get(target, key, receiver);
  						},
			  			set(target, key, value, receiver) {
			    			bindsEl.forEach(dom => dom.innerText = value);
			    			return Reflect.set(target, key, value, receiver);
			 			}
		        });

		        el.addEventListener('input', () => {
		        	proxy[key] = el.value;
		        })

		        return proxy;
		    }
		});

		const vm = new ViewModel(document.querySelector('input'));
		vm.name = 'proxy 实现一个双向bing'
	})()
</script>
</html> ```

我所了解的Proxy

what?

how?

扩展：使用proxy实现双向绑定