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

从“vue”导入vue从“vux”导入api从“vux”导入{toast plugin}。/API/API//介绍打包的API模块和使用的吐司弹出窗口。弹出可以选择任意帧的漂亮弹出组件vue . use(toast plugin)；//toast初始化let VM=new Vue()；//创建一个实例，因为toast popup依赖于它，所以在这里创建一个实例，用vue . prototype . dilog=function(value){ VM调用popup。$ vux . toast . show({ text : VaLue | | '业务处理成功'，键入3360' text '，width:' 5。};//trap，只要接口状态改变，就会调用这个方法。var interceptor={ set : function(recobj，key，value){ VM . dilog(value)；//弹出层，值是api返回的状态值，返回this } }//创建一个代理来侦听。var代理工程师=新代理(API、拦截器)；vue . prototype . API=Proxy engineer；//用新的实例替换api的原因是vue的实例不应该被引入到创建和打包的api文件中。如果不使用代理，直接将vue引入api文件将是巨大的消耗。

Classapi {constructor () {this。mass=“业务处理成功！”；//定义信息状态属性//当前界面错误提示此。code=' 000000 ' | | ' 99999 ' } Post(params，callback，dailog，errcallback=function(){//错误消息回调}) {//dailog就是是否需要初始化弹出窗口，比如一个列表通常不需要加载。Boolean，通常只需要在单击事件时使用，或者初始///初始化数据报告错误。//this.code表示状态代码让config={ }；config . data=params . data | | { }；var URL=` $ { base } $ { params . URL } . do `；var dailog=dailog//打包后axios的post方法返回axios.post (URL、config.data、config、dailog)。然后(RES={ let rst=res.dataif(rst . code==' 000000 ' | | rst . code==' 999999 '){ callbackcallback(rst . result | | { })；If (dailog) {//根据dailog值，判断是否需要弹出窗口。这个。质量=rst。消息；} } else { errcallback errcallback()；this . messages=rst . message；//听听消息的变化}//这里，如果返回这个，则返回代理对象的这个return RES })。catch(e={ console . log(e)})} } const API=new API()；导出默认api//代码的核心是定义类的信息字段，并通过消息值的变化反馈信息

我使用的吐司效果。

This.api.post(params，res={//需要执行的逻辑//不再写//this。$msg(res.value)代码，代理已经为你处理过了})这是我在实践中使用的代理，这个方法可以应用于多页或者单页。当然，代码有点粗糙，没有做太多限制。它只是说明了一些事情。以防你忘记。

对了，这里用一下《Understanding ECMAScript 6》这本书的内容，补充一些自己的理解。做好记录就行了。

什么是代理和反射？

通过调用新的代理()，可以创建一个代理来替换另一个对象(称为目标)。该代理虚拟化了目标对象，因此代理和目标对象可以被视为表面上的同一个对象。代理允许您拦截目标对象上的底层操作，这原本是JS引擎的内部功能。拦截行为使用可以响应特定操作的函数(称为陷阱)。拦截器的概念更重要。反射拦截器有一些反射接口，

拦截的目的是重写内置对象的具体方法。

创建简单的代理

let target={ }；让proxy=new Proxy(目标，{ })；proxy.name=' proxyconsole . log(proxy . name)；//“proxy”console . log(target . name)；//“proxy”target . name=“target”；console . log(proxy . name)；//“target”console . log(target . name)；//“目标”代理拦截目标主要使用的点

let target={ name : ' target ' }；Letproxy=newproxy (target，{set (trap target，key，value，receiver){//忽略现有属性以避免影响它们，如果(！trap target . hasown Property(key)){ if(isNaN(value)){抛出新的TypeError('Property必须是数字。');} }//添加属性returnreflect.set(陷阱目标、键、值、接收器)；}});//添加新的属性proxy . count=1；console . log(proxy . count)；//1 con sole . log(target . count)；//1//您可以为名称分配一个非数值，因为该属性已经存在proxy.name=' proxyconsole . log(proxy . name)；//“proxy”console . log(target . name)；//“proxy”//抛出了一个错误proxy . other NAmE=“proxy”；此外，vue3.0的响应也是使用的代理

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