前言

最近收到一个需求挺有意思的，那就是给可视化编辑器的动态请求配置面板添加pre-request请求脚本预处理。跟postman的pre-request功能一样，在发送请求之前先执行脚本给编辑器设置变量，然后在params|Body|Header面板通过{{variable}}使用变量。

接下来就来讲解一下此功能如何实现的，其本质就是在web端执行脚本注入变量因为在JavaScript执行第三方代码，因此实现一个JS沙箱来进行执行环境隔离是非常重要的，不能因为执行别人的脚本异常影响到编辑器的能力。这里不会涉及到CSS 隔离只是纯JS 隔离，针对CSS隔离计划在我的编辑器插件设计完成之后会进行分享。

需求分析

在正式开始功能实现之前，我们需要先充分理解需求。

postman如何使用环境变量和预处理脚本postman分为Globals(全局变量) < Environments (环境变量) < Collections (集合变量) < variables（局部变量, 层越深优先级越高，遇到同名key内层覆盖外层

首先配置环境变量的属性名和变量值

在接口里配置params|Headers|Body...。[Key]:{{varible}}的形式

当postman在环境变量中能找到{{varible}}的声明则替换成对应的值，没有找到保持原有

此时你会发现针对于AppKey和Signature加密key是通过CryptoJS脚本执行加密得来的，单纯的通过配置环境变量并不能满足我们的需求。此时pre-request就发挥了他的作用。

在script中的pre-script编写JavaScript脚本语法生成对应变量的值，然后通过pm.global.set(key,value)赋值全局变量、pm.environment.set(key,value)赋值环境变量、pm.variables.set(key,value)赋值局部变量。如下我赋值了局部变量

如下可以看到，在该请求就能获取到在pre-script设置的对应变量了

功能实现整体项目结果

创建一个PM顶级类管理旗下的Global类、Environment类...环境变量数据对象保存在当前类实例下面,这么设计的好处在于方便后续功能拓展。创建一个CodeSandbox类实现JS沙箱用于执行第三方脚本数据

这里模拟了三个组件(组件代表可视化里配置动态数据的组件), 因为是demo所以比较简陋对于 输入区域可以采用Monaco或者codemirror实现语法高亮和代码补全、格式化代码格式。 如果不想集成编辑器，那么可以采用highlight和prettier进行高亮和格式化

环境变量相关类