Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實(shí)現(xiàn)
在開發(fā)項(xiàng)目過程中幾乎所有接口都需要知道它的返回狀態(tài),比如失敗或者成功,在移動端通常后臺會返回結(jié)果,而我們只需要一個彈窗來彈出來結(jié)果就可以了。但是這個彈窗如果在整個項(xiàng)目里需要手動去每一個都定義,那是非常龐大的代碼量,而且維護(hù)起來非常的麻煩。通常做法就是綁定在原型上一個公共方法,比如this.message('后臺返回接口信息')。 這樣看似省力了很多其實(shí)還是很麻煩。 如果使用了proxy做一個全局代理,那么就完全不一樣了。不管任何一個api都會將狀態(tài)傳遞個這個代理中心,并且由代理中心直接反應(yīng)結(jié)果。

import Vue from 'vue'
import {ToastPlugin} from 'vux'
import api from './api/api'
//引入封裝好的api模塊,和使用的toast彈出窗,彈窗可以選擇任何框架的看起來比較好看的彈窗組件
Vue.use(ToastPlugin);
//toast初始化
let vm = new Vue();
//創(chuàng)建實(shí)例,是因?yàn)閠oast彈窗依賴它所以這里要創(chuàng)建個實(shí)例,去調(diào)用彈窗用
Vue.prototype.dilog = function (value) {
vm.$vux.toast.show({
text: value || "業(yè)務(wù)處理成功",
type: 'text',
width: "5rem",
position: 'middle'
});
};
//陷阱,只要接口狀態(tài)改變就會調(diào)用此方法
var interceptor = {
set: function (recObj, key, value) {
vm.dilog(value);
//彈出層,value就是api返回的狀態(tài)值
return this
}
};
//創(chuàng)建代理以進(jìn)行偵聽
var proxyEngineer = new Proxy(api, interceptor);
Vue.prototype.api = proxyEngineer;
//將api替換為新的實(shí)例
之所以這樣做,是因?yàn)閯?chuàng)建好的封裝好的api文件里,不應(yīng)該在去引入一個vue實(shí)例了,如果不用代理,直接在api文件里引入vue那將是巨大的消耗。
class API {
constructor(){
this.massages = "業(yè)務(wù)處理成功!";
//定義信息狀態(tài)屬性
//當(dāng)前接口錯誤提示
this.code='000000'||'999999'
}
post(params, callback, dailog, errcallback = function () { //錯誤信息回調(diào)}) {
//dailog 是是否需要在初始化彈窗,比如一個列表通常不需要加載完了彈出一個加載成功,或者獲取數(shù)據(jù)成功什么的。Boolean,通常只需要在點(diǎn)擊某事件時(shí)候使用,或者是初///始化數(shù)據(jù)報(bào)錯使用
//this.code 代表狀態(tài)碼
let config={};
config.data = params.data||{};
var url = `${base}${params.url}.do`;
var dailog = dailog;
//封裝了axios的post方法
return axios.post(url, config.data, config, dailog).then(res => {
let rst = res.data;
if (rst.code === '000000' || rst.code === '999999') {
callback&&callback(rst.result||{});
if (dailog) {
//根據(jù)dailog 值來判斷需不需要彈窗
this.massages = rst.message;
}
}else{
errcallback && errcallback();
this.massages=rst.message;
//監(jiān)聽massages的變化
}
//這里如果返回this返回的是代理對象的this
return res
}).catch(e => {
console.log(e)
})
}
}
const api = new API();
export default api
//代碼核心地方其實(shí)就是在類上定義了信息字段,通過massages值變化來反饋信息

我所使用的toast效果。
this.api.post(params, res => {
//你需要執(zhí)行的邏輯
// 再也不需要寫什么
//this.$msg(res.value) 這類的代碼,代理已經(jīng)都幫你處理完了
})
這就是我在實(shí)際中用到的代理,這個方法不管在多頁面還是單頁面都適用。當(dāng)然代碼有些粗糙,也沒做過多限制,只是說了下思想。以防自己忘記。
順帶說下代理這個特性這里就把《Understanding ECMAScript 6》這本書的內(nèi)容拿來用了,并稍微添加一些自己的理解。只做記錄。
代理與反射是什么?
通過調(diào)用 new Proxy() ,你可以創(chuàng)建一個代理用來替代另一個對象(被稱為目標(biāo)),這個代 理對目標(biāo)對象進(jìn)行了虛擬,因此該代理與該目標(biāo)對象表面上可以被當(dāng)作同一個對象來對待。 代理允許你攔截在目標(biāo)對象上的底層操作,而這原本是 JS 引擎的內(nèi)部能力。攔截行為使用了 一個能夠響應(yīng)特定操作的函數(shù)(被稱為陷阱)。 攔截器的概念比較重要。 Reflect 攔截器有一些反射接口,

攔截的作用其實(shí)就是重寫內(nèi)置對象的特定方法。
創(chuàng)建一個簡單的代理
let target = {};
let proxy = new Proxy(target, {});
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"
target.name = "target";
console.log(proxy.name); // "target"
console.log(target.name); // "target"
proxy攔截代理了target
我主要使用到的點(diǎn)
let target = {
name: "target"
};
let proxy = new Proxy(target, {
set(trapTarget, key, value, receiver) {
// 忽略已有屬性,避免影響它們
if (!trapTarget.hasOwnProperty(key)) {
if (isNaN(value)) {
throw new TypeError("Property must be a number.");
}
}
// 添加屬性
return Reflect.set(trapTarget, key, value, receiver);
}
});
// 添加一個新屬性
proxy.count = 1;
console.log(proxy.count); // 1
console.log(target.count); // 1
// 你可以為 name 賦一個非數(shù)值類型的值,因?yàn)樵搶傩砸呀?jīng)存在
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"
// 拋出錯誤
proxy.anotherName = "proxy";
另外vue3.0 的響應(yīng)式也是使用的代理
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue-cli創(chuàng)建項(xiàng)目的loader問題
下面小編就為大家分享一篇解決vue-cli創(chuàng)建項(xiàng)目的loader問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看看吧2018-03-03
詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實(shí)例,本文主要為大家詳細(xì)介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09
vue3+Element?Plus?v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的案例代碼
這篇文章主要介紹了vue3+Element?Plus?v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
rem實(shí)現(xiàn)響應(yīng)式布局的思路詳解
這篇文章主要為大家介紹了rem實(shí)現(xiàn)響應(yīng)式布局的思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03

