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


Posted in Javascript onJune 07, 2019

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

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

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值变化来反馈信息

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

我所使用的toast效果。

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

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

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

代理与反射是什么?

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

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

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

创建一个简单的代理

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 的响应式也是使用的代理

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

Javascript 相关文章推荐
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 #Javascript
ES6小技巧之代替lodash
Jun 07 #Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 #Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 #Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 #Javascript
详解vue项目中实现图片裁剪功能
Jun 07 #Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 #Javascript
You might like
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php常用hash加密函数
2014/11/22 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
python基于pyDes库实现des加密的方法
2017/04/29 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python 字典的打印实现
2019/09/26 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
2014超市收银员工作总结
2014/11/13 职场文书
行政助理岗位职责
2015/02/10 职场文书
2015年度党员个人总结
2015/02/14 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电