本篇文章為大家展示了怎么在Vue中利用Proxy監(jiān)聽接口的狀態(tài)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了樂清免費(fèi)建站歡迎大家使用！

import Vue from 'vue'
import {ToastPlugin} from 'vux'
import api from './api/api'
//引入封裝好的api模塊，和使用的toast彈出窗，彈窗可以選擇任何框架的看起來(lái)比較好看的彈窗組件
Vue.use(ToastPlugin);
//toast初始化
let vm = new Vue();
//創(chuàng)建實(shí)例，是因?yàn)閠oast彈窗依賴它所以這里要?jiǎng)?chuàng)建個(gè)實(shí)例，去調(diào)用彈窗用
Vue.prototype.dilog = function (value) {
 vm.$vux.toast.show({
 text: value || "業(yè)務(wù)處理成功",
 type: 'text',
 width: "5rem",
 position: 'middle'
 });
};
//陷阱，只要接口狀態(tài)改變就會(huì)調(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)該在去引入一個(gè)vue實(shí)例了，如果不用代理，直接在api文件里引入vue那將是巨大的消耗。

class API {
 constructor(){
 this.massages = "業(yè)務(wù)處理成功!";
 //定義信息狀態(tài)屬性
 //當(dāng)前接口錯(cuò)誤提示
 this.code='000000'||'999999'
 }

 post(params, callback, dailog, errcallback = function () { //錯(cuò)誤信息回調(diào)}) {
 //dailog 是是否需要在初始化彈窗，比如一個(gè)列表通常不需要加載完了彈出一個(gè)加載成功，或者獲取數(shù)據(jù)成功什么的。Boolean，通常只需要在點(diǎn)擊某事件時(shí)候使用，或者是初///始化數(shù)據(jù)報(bào)錯(cuò)使用 
 //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 值來(lái)判斷需不需要彈窗
   this.massages = rst.message;
  }
  }else{
  errcallback && errcallback();
  this.massages=rst.message;
  //監(jiān)聽massages的變化
  }
  //這里如果返回this返回的是代理對(duì)象的this
  return res
 }).catch(e => {
  console.log(e)
 })
 }

}
const api = new API();

export default api
//代碼核心地方其實(shí)就是在類上定義了信息字段，通過(guò)massages值變化來(lái)反饋信息

我所使用的toast效果。

 this.api.post(params, res => {
  //你需要執(zhí)行的邏輯
 // 再也不需要寫什么
  //this.$msg(res.value) 這類的代碼，代理已經(jīng)都幫你處理完了
 })

這就是我在實(shí)際中用到的代理，這個(gè)方法不管在多頁(yè)面還是單頁(yè)面都適用。當(dāng)然代碼有些粗糙，也沒做過(guò)多限制，只是說(shuō)了下思想。以防自己忘記。

順帶說(shuō)下代理這個(gè)特性這里就把《Understanding ECMAScript 6》這本書的內(nèi)容拿來(lái)用了，并稍微添加一些自己的理解。只做記錄。

代理與反射是什么？

通過(guò)調(diào)用 new Proxy() ，你可以創(chuàng)建一個(gè)代理用來(lái)替代另一個(gè)對(duì)象（被稱為目標(biāo)），這個(gè)代 理對(duì)目標(biāo)對(duì)象進(jìn)行了虛擬，因此該代理與該目標(biāo)對(duì)象表面上可以被當(dāng)作同一個(gè)對(duì)象來(lái)對(duì)待。 代理允許你攔截在目標(biāo)對(duì)象上的底層操作，而這原本是 JS 引擎的內(nèi)部能力。攔截行為使用了 一個(gè)能夠響應(yīng)特定操作的函數(shù)（被稱為陷阱）。 攔截器的概念比較重要。 Reflect 攔截器有一些反射接口，

攔截的作用其實(shí)就是重寫內(nèi)置對(duì)象的特定方法。

創(chuàng)建一個(gè)簡(jiǎn)單的代理

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);
}
});
// 添加一個(gè)新屬性
proxy.count = 1;
console.log(proxy.count); // 1
console.log(target.count); // 1
// 你可以為 name 賦一個(gè)非數(shù)值類型的值，因?yàn)樵搶傩砸呀?jīng)存在
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"
// 拋出錯(cuò)誤
proxy.anotherName = "proxy";

上述內(nèi)容就是怎么在Vue中利用Proxy監(jiān)聽接口的狀態(tài)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。