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 相关文章推荐
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
小学运动会表扬稿
2014/01/19 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
四风查摆剖析材料
2014/10/10 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
Java详细解析==和equals的区别
2022/04/07 Java/Android