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 相关文章推荐
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
你了解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新手上路(十一)
2006/10/09 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
python MySQLdb使用教程详解
2018/03/20 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
python源文件的字符编码知识点详解
2021/03/04 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
学校三八妇女节活动情况总结
2014/03/09 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
美术教师个人总结
2015/02/06 职场文书
入党申请书格式
2019/06/20 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS