Vue使用Proxy监听所有接口状态的方法实现

在开发项目过程中几乎所有接口都需要知道它的返回状态,比如失败或者成功,在移动端通常后台会返回结果,而我们只需要一个弹窗来弹出来结果就可以了。但是这个弹窗如果在整个项目里需要手动去每一个都定义,那是非常庞大的代码量,而且维护起来非常的麻烦。通常做法就是绑定在原型上一个公共方法,比如this.message('后台返回接口信息')。 这样看似省力了很多其实还是很麻烦。 如果使用了proxy做一个全局代理,那么就完全不一样了。不管任何一个api都会将状态传递个这个代理中心,并且由代理中心直接反应结果。

import Vue from 'vue'
import {ToastPlugin} from 'vux'
import api from './api/api'
//引入封装好的api模块,和使用的toast弹出窗,弹窗可以选择任何框架的看起来比较好看的弹窗组件
Vue.use(ToastPlugin);
//toast初始化
let vm = new Vue();
//创建实例,是因为toast弹窗依赖它所以这里要创建个实例,去调用弹窗用
Vue.prototype.dilog = function (value) {
 vm.$vux.toast.show({
 text: value || "业务处理成功",
 type: 'text',
 width: "5rem",
 position: 'middle'
 });
};
//陷阱,只要接口状态改变就会调用此方法
var interceptor = {
 set: function (recObj, key, value) {
 vm.dilog(value);
 //弹出层,value就是api返回的状态值
 return this
 }
};
//创建代理以进行侦听
var proxyEngineer = new Proxy(api, interceptor);
Vue.prototype.api = proxyEngineer;
//将api替换为新的实例

之所以这样做,是因为创建好的封装好的api文件里,不应该在去引入一个vue实例了,如果不用代理,直接在api文件里引入vue那将是巨大的消耗。

class API {
 constructor(){
 this.massages = "业务处理成功!";
 //定义信息状态属性
 //当前接口错误提示
 this.code='000000'||'999999'
 }

 post(params, callback, dailog, errcallback = function () { //错误信息回调}) {
 //dailog 是是否需要在初始化弹窗,比如一个列表通常不需要加载完了弹出一个加载成功,或者获取数据成功什么的。Boolean,通常只需要在点击某事件时候使用,或者是初///始化数据报错使用
 //this.code 代表状态码
 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) {
  //根据dailog 值来判断需不需要弹窗
   this.massages = rst.message;
  }
  }else{
  errcallback && errcallback();
  this.massages=rst.message;
  //监听massages的变化
  }
  //这里如果返回this返回的是代理对象的this
  return res
 }).catch(e => {
  console.log(e)
 })
 }

}
const api = new API();

export default api
//代码核心地方其实就是在类上定义了信息字段,通过massages值变化来反馈信息

我所使用的toast效果。

 this.api.post(params, res => {
  //你需要执行的逻辑
 // 再也不需要写什么
  //this.$msg(res.value) 这类的代码,代理已经都帮你处理完了
 })
 

这就是我在实际中用到的代理,这个方法不管在多页面还是单页面都适用。当然代码有些粗糙,也没做过多限制,只是说了下思想。以防自己忘记。

顺带说下代理这个特性这里就把《Understanding ECMAScript 6》这本书的内容拿来用了,并稍微添加一些自己的理解。只做记录。

代理与反射是什么?

通过调用 new Proxy() ,你可以创建一个代理用来替代另一个对象(被称为目标),这个代 理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当作同一个对象来对待。 代理允许你拦截在目标对象上的底层操作,而这原本是 JS 引擎的内部能力。拦截行为使用了 一个能够响应特定操作的函数(被称为陷阱)。 拦截器的概念比较重要。 Reflect 拦截器有一些反射接口,

拦截的作用其实就是重写内置对象的特定方法。

创建一个简单的代理

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

我主要使用到的点

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 赋一个非数值类型的值,因为该属性已经存在
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"
// 抛出错误
proxy.anotherName = "proxy";

另外vue3.0 的响应式也是使用的代理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 浅析Proxy可以优化vue的数据监听机制问题及实现思路

    我们首先来看vue2.x中的实现,为简单起见,我们这里不考虑多级嵌套,也不考虑数组 vue2.x中的实现 其本质是new Watcher(data, key, callback)的方式,而在调用之前是先将data中的所有属性转化成可监听的对象, 其主要就是利用Object.defineProperty,. class Watcher{ constructor(data, key, cb){ } } //转换成可监听对象 function observe(data){ new Observer(d

  • Vue使用Proxy监听所有接口状态的方法实现

    在开发项目过程中几乎所有接口都需要知道它的返回状态,比如失败或者成功,在移动端通常后台会返回结果,而我们只需要一个弹窗来弹出来结果就可以了.但是这个弹窗如果在整个项目里需要手动去每一个都定义,那是非常庞大的代码量,而且维护起来非常的麻烦.通常做法就是绑定在原型上一个公共方法,比如this.message('后台返回接口信息'). 这样看似省力了很多其实还是很麻烦. 如果使用了proxy做一个全局代理,那么就完全不一样了.不管任何一个api都会将状态传递个这个代理中心,并且由代理中心直接反应结果.

  • Android实现监听电话呼叫状态的方法

    本文实例讲述了Android实现监听电话呼叫状态的方法.分享给大家供大家参考.具体如下: 在清单文件AndroidManifest.xml中添加权限: 复制代码 代码如下: <uses-permission android:name="android.permission.READ_PHONE_STATE"/> java代码如下: // 取得电话服务 TelephonyManager telManager = (TelephonyManager) getSystemServ

  • android获取监听SD Card状态的方法

    本文实例讲述了android获取监听SD Card状态的方法.分享给大家供大家参考.具体分析如下: 1. 注册StorageEventListener来监听SD卡状态即onStorageStateChanged()方法,当sd卡状态改变时,调用该方法. 复制代码 代码如下: public void onStorageStateChanged(String path,String oldState,String newState){ if (newState.equals(Environment.

  • vue移动端监听滚动条高度的实现方法

    这两天做移动端项目遇到的问题,就是当滚动条下拉到一定的高度的时候,让某个东西固定定位到顶部 首先做的如何监听滚动条的高度,下面是我写的方法 var _this =this window.addEventListener('scroll',function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop>100{//滚动条的高度,可以动态获取也可以写死 //

  • js实时监听文本框状态的方法

    复制代码 代码如下: <div id="msg"></div> <input type="text" name="txt" id="txt"/> <script> //当状态改变的时候执行的函数 function handle() { document.getElementById('msg').innerHTML = document.getElementById('txt')

  • vue项目如何监听localStorage或sessionStorage的变化

    出现这个问题的起因:在一个VUE页面中,引入两个组件,A组件实现基础信息展示,B组件展示列表,我要通过A组件的一个按钮触发状态,然后B组件根据A组件触发的状态来做业务处理,首先想到的是把状态放在localStorage,接下去就是在B组件怎么监听A组件状态 解决方法: 1.首先在 main.js 中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件并派发事件.

  • vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

    [注]:popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本. c.需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件. d.只有在做出浏览器动作时,才会触发该事件,如用

  • vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解

    本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法.分享给大家供大家参考,具体如下: 在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求. 我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽.而且这种做法,会让你更加难以判断是否

  • vue监听路由变化时watch方法会执行多次的原因及解决

    目录 需求描述: 需求解析: 解决需求 问题解决 本人前端菜鸟一名,一直致力于不间断的生产管理后台的bug,并以此自勉自励.近几天接到一个需求,网上也搜了很多例子,但是没有从根本上解决.在这里记录一下我自己的解决的过程,这也是第一次在掘金发言,求轻虐. 需求描述: 有A.B两个页面,需要将A页面的orderId用路由传参的方式传入到B页面执行数据关联查询,然后显示在B页面 需求解析: 如果是你,你拿到这个需求,应该很容易想到在B页面对路由变化做watch,然后获取参数执行查询数据的方法完事. 解

随机推荐