Vue proxy代理攔截是指在Vue中通過代理的方式,攔截請求并轉發。Proxy對象是ES6新增加的方法,它能夠攔截各種操作,包括獲取屬性、設置屬性、函數調用等。這里我們主要討論代理攔截,即攔截網絡請求。
Vue已經內置了axios庫用于網絡請求,對于一些非常規需求,我們需要對axios進行二次封裝或者使用Vue代理攔截。Vue代理攔截的原理是基于Proxy對象的,利用Proxy對象的攔截方法,對于vue-resource、layui等網絡請求插件進行請求的攔截。
export default{ proxy:{//請求攔截 "/demo/*":{ target:"http://localhost:8080/",//目標服務器地址 changeOrigin:true,//允許跨域 pathRewritle:{ "^/demo":"" } } } }
以上為vue.config.js中的代理攔截配置代碼,分別設置了請求的攔截地址、目標服務器地址、允許跨域以及路徑重寫等。當調用"/demo/*"這個請求時,它將會自動轉發到"http://localhost:8080/"這個地址上。
此外,Proxy對象還可以實現請求攔截與響應攔截等操作,如下為代理攔截器的例子:
let proxy = new Proxy({},{ get:function(target,key,receiver){ console.log('Get function call on target,with keys:',key); return Reflect.get(target,key,receiver); }, set:function(target,key,value,receiver){ console.log('Set function call on target,with keys:',key); return Reflect.set(target,key,value,receiver); } }); proxy.name='Proxy'; console.log(proxy); console.log(proxy.name);
以上代碼演示了如何通過代理攔截器來攔截對象的讀取和設置操作。我們可以在get和set方法中加入自己的邏輯來進行攔截。比如在請求數據時可以加入loading效果,在請求返回時可以對數據格式進行處理等等。
總之,Vue代理攔截是一種比較靈活的使用方式。無論是在數據請求、UI渲染還是路由跳轉中,都可以通過攔截相關的操作,加入自己的邏輯,實現各種需求。