困扰我的主流程函数中的异步嵌套我分别用async.auto和async await去处理竟发现........

"小谢，你看一下为什么这个枚举选择器出现了请选择三个字"
"小谢，为什么这个属性选择器出现三个字"
"小谢，为什么这个事件选择器出现三个字"

我是一个B端前端程序员最近几个月离不开的就是上面这个组件。它是用于建立一个由事件、属性、比较符、枚举组成的分析指标进行数据分析就是这样一个简单的选择器，其中的数据依赖关系对于工作一年的我来说是十分复杂的。

目前的业务是保存报表，场景是用户选择好了的条件组合点击保存前端把内容存在后端，下次点击报表回显之前选择的条件组，需求是当某个选择器选中的值不存在于选择列表中就会展示给用户请选择三个字。也是因为这三个频频被公司内的数据分析师找上门。明明列表中存在这项下拉选项却展示给用户请选择造成误会。其中的缘由对于bug敏锐的我一下就明白是因为代码执行顺序的原因，根据这个bug我今天回溯一下修复过程对js代码执行过程有很大的提升。

个人梳理的流程图（画的不好下次不许画了）

最早用async await修复一版的伪代码

function  async initReport(ID){
     const { 报表内容 }  =  await 请求报表内容
     const { 事件列表 }  =  await 请求事件列表
     ......... 
     const { 事件一的属性列表 }  = await 请求属性列表
     const { 事件二的属性列表 }  = await 请求属性列表
     .........
     const { 事件一的属性一的枚举列表 }  = await 请求属性列表
     const { 事件一的属性二的枚举列表 }  = await 请求属性列表
     const { 事件二的属性一的枚举列表 }  = await 请求属性列表
     const { 事件二的属性一的枚举列表 }  = await 请求属性列表
     .........
     
}

引入了async库去处理的伪代码

 async.auto({
   "请求报表内容"：请求报表内容方法，
   "请求事件列表"：请求事件列表方法，
   "请求属性":["请求报表内容"，"请求事件列表"，请求属性方法：（res）=>{
       res[1].events.forEach( async x=>{
           await 发起获取属性列表接口()
           填充属性列表
       })
   }]，
   "请求枚举":["请求属性"，请求枚举方法:(res)=>{
       res[0].attributes.forEach(async x=>{
          await 发起获取枚举接口()
          填充枚举列表
       })
   }]
 })

auto方法接受的第一个参数为一个对象key表示任务名value表示任务方法，而任务方法可以是一个对象也可以是一个数组，为一个对象时此任务没有任何执行依赖换句话说就是立即执行代码块，另外如果是个数组的话结构为['依赖一方法名'，'依赖二方法名'，本方法执行代码]，会等数组中的方法依赖都执行完才会执行该方法 还接受一个该依赖返回的reject()结果，这样一看依赖关系是不是清晰多了。

文章总结:其实两种方法各有各的好处不过方法二本人后续维护起来更加得心应手，他的代码块逻辑条理清晰 。我最早的方法是嵌套promise不断的.then().then.()后面改为这样的方法后代码看起来也舒服多了。希望可以帮助大家。