最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實(shí)現(xiàn)

 更新時(shí)間:2019年06月07日 10:32:27   作者:凡人已非凡  
這篇文章主要介紹了Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

我所使用的toast效果。

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

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

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

代理與反射是什么?

通過調(diào)用 new Proxy() ,你可以創(chuàng)建一個(gè)代理用來替代另一個(gè)對(duì)象(被稱為目標(biāo)),這個(gè)代 理對(duì)目標(biāo)對(duì)象進(jìn)行了虛擬,因此該代理與該目標(biāo)對(duì)象表面上可以被當(dāng)作同一個(gè)對(duì)象來對(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";

另外vue3.0 的響應(yīng)式也是使用的代理

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 前端主流框架vue學(xué)習(xí)筆記第二篇

    前端主流框架vue學(xué)習(xí)筆記第二篇

    一步一步學(xué)Vue,這篇文章為大家分享了第二篇前端主流框架vue學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 解決vue-cli創(chuàng)建項(xiàng)目的loader問題

    解決vue-cli創(chuàng)建項(xiàng)目的loader問題

    下面小編就為大家分享一篇解決vue-cli創(chuàng)建項(xiàng)目的loader問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看看吧
    2018-03-03
  • Vue核心概念A(yù)ction的總結(jié)

    Vue核心概念A(yù)ction的總結(jié)

    今天小編就為大家分享一篇關(guān)于Vue核心概念A(yù)ction的總結(jié),小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • Vue常用的修飾符的作用詳解

    Vue常用的修飾符的作用詳解

    為了方便大家寫代碼,Vue 給大家提供了很多方便的修飾符,比如我們經(jīng)常用到的取消冒泡,阻止默認(rèn)事件等等,這篇文章將給大家分享Vue 中的常用的修飾符
    2022-08-08
  • 詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件

    詳解如何優(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ù)同步的案例代碼

    這篇文章主要介紹了vue3+Element?Plus?v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-01-01
  • vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案

    vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案

    這篇文章主要介紹了vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-04-04
  • Vue表單輸入綁定的示例代碼

    Vue表單輸入綁定的示例代碼

    這篇文章主要介紹了Vue表單輸入綁定的示例代碼,本文使用v-model指令在表單input創(chuàng)建雙向數(shù)據(jù)綁定,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2018-11-11
  • Vue3初始化如何調(diào)用函數(shù)

    Vue3初始化如何調(diào)用函數(shù)

    這篇文章主要介紹了Vue3初始化如何調(diào)用函數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • rem實(shí)現(xiàn)響應(yīng)式布局的思路詳解

    rem實(shí)現(xiàn)響應(yīng)式布局的思路詳解

    這篇文章主要為大家介紹了rem實(shí)現(xiàn)響應(yīng)式布局的思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03

最新評(píng)論

西乌| 高要市| 邢台县| 青阳县| 都匀市| 申扎县| 平谷区| 邢台市| 大宁县| 洪洞县| 新疆| 湖口县| 沙洋县| 温州市| 武川县| 灵武市| 泰宁县| 福建省| 东城区| 巴南区| 开平市| 秦皇岛市| 永吉县| 大方县| 安阳市| 永登县| 濉溪县| 昭通市| 大连市| 团风县| 太白县| 仙游县| 雅江县| 凉城县| 临安市| 娄底市| 达孜县| 且末县| 乌拉特前旗| 池州市| 富锦市|