封装的概念是把所有的接口地址都看成/{Controller}/{Action}比如/user/getAll，那么Controller就是user，Action就是getAll。如果层次比较多，比如/module/user/getAll，那么Controller可以看做是module/user，Action就是getAll。具体情况根据实际项目中的接口地址来分析。引入需要使用的装饰器类。装饰器Controller默认使用类名作为请求的{Controller}部分，也可以传参改写路径。方法装饰器Get定义一个Get请求默认使用方法名作为请求的{Action}部分，也可以传参重写路径。Post定义一个Post请求默认使用方法名作为请求的{Action}部分，也可以传递参数重写路径。如何封装接口请求？例如接口路径为/user/getAll，get方法请求不带任何参数。创建UserApi.js文件。具体文件名可根据实际项目规范而定。@Controller()classuser{@Get()getAll(){}}//这里请导出类的实例，方便调用。//后面的文字只写类定义，不再写模块导出语句。exportdefaultnewuser()这是最简单的封装例子。接口路径为/user/getUserById，获取请求，需要传一个id参数@Controller()classuser{/***@param{String}id用户id*/@Get()getUserById(id){return{id}}}在方法中返回接口需要的参数，装饰器会在请求时自动传过去。这样可以更清楚的知道这个接口需要哪些参数，还可以对每个参数进行注释。页面调用importUserApifrom'./UserApi.js'//相当于axios.get('/user/getAll')UserApi.getAll()//相当于axios.get('/user/getUserById',{params:{id:1}})UserApi.getUserById(1)装饰器的代码实现首先封装axios创建一个http.js文件，通过这个文件调用发送请求的方法importaxiosfrom'axios'consthttp=axios.create()//这里根据项目需要添加自己的配置。exportdefaulthttp封装了几个装饰器，创建了一个Decorators.js文件importhttpfrom'./http'/***一定要在Controller类Controller上使用这个装饰*@param{String}name支持路径重写*@returns*/exportfunctionController(name){returnfunction(target){//如果没有指定路径，默认路径是Controller的名称//!如果有代码混淆，一定要传入name参数if(name===undefined)name=target.name//保存Controller对象的路径target.controller=name}}/***创建装饰器*@param{*}request*/functioncreateAction(request){/***支持重写Action的路径*@param{String}path*/returnfunction(path){returnfunction(target,name,descriptor){if(路径)名称=路径常量{值}=描述符常量参数=值.应用(target,arguments)/***函数中必须获取Controller的路径，因为方法的装饰器先于类的装饰器执行*@returns*/descriptor.value=function(){constcontroller=目标.构造函数。controllerconsturl=`/${controller}/${name}`returnrequest(url,params)}}}}exportconstGet=createAction((url,params)=>{returnhttp.get(url,{params})})exportconstPost=createAction((url,params)=>{returnhttp.post(url,params)})注意，打包的时候，为了压缩体积，代码通常会乱码。这样会导致如果@Controller不传入参数，最终拼接的接口路径不正确。例如，原来的/user/getAll变成了/a/getAll。将原来的类user打包成类a。
