方法分发管理与异步 与 async await 的运用情景

前置：
1.map foreach
2async await ：https://segmentfault.com/a/1190000007535316
场景是这样的：
一个页面，有6个echart，都可以点击进去看详情。（6个图接口，6个详细图接口）
如果用垃圾写法就是：
写12个方法
高级一点：
用flag标示出进的是哪个图的，然后switch case 1 2 3 。。。
再好一点的写法：方法分发管理
在data中保存一个对象，这个对象有6个属性，属性值分别为6个方法

echartsObj: {
        f1: (e = 'f1') => this.initF1(e),
        f2: (e = 'f2') => this.initF2(e),
        f3: (e = 'f3') => this.initF3(e),
        f4: (e = 'f4') => this.initF4(e),
        f5: (e = 'f5') => this.initF5(e),
        f6: (e = 'f6') => this.initF6(e)
      },

在调后台接口的时候就有异步的问题了。
也就是initF1怎么写：

async initF1(){
	访问接口 await xxxxxxx
	let res
	画图参数
	return res//这个返回值用于画图
}
async initF2(){
...........
async initF6(){

第一步：刚进页面init时候：

getDataList () {
      Object.values(this.echartsObj).forEach(async (v) => {
        const e = await v()
        this.画echart(e)
      })
      // Promise.all(Object.values(this.echartsObj).map(async(v) => {
      //   const e = await v()
      //   this.initEcharts(e.name, e.option)
      // }))
      // 这种map的要多套一层promise（ES6）是因为map不支持异步，所以麻烦一点
    },

这里遍历了方法对象的所有属性，所以是依次调用存放在方法对象里的方法。

第二步：点详情，重新绘制详情的图

async getDetail (val) {//例如val = initF1
      const {name, option} = await this.echartsObj[val]('detailEchart')
      //从此获得了F1中的画图参数+返回值
      增加详细版的画图参数
      this.画echart(所有参数)
    }

以下是思路图

至于为什么第一步不用async，第二步用了async。（要调用async就要await，有await就要它函数名前是async的这个死循环）这个括弧内的死循环基本是正确的但是有一种例外情况。
首先，async的使用情景包含await的使用情景，也就是async可以单用，但是await一用就要用async。以下讨论不适用与async单用时候。
、、
await的作用就是一个运算符。
1.1如果await后面跟的不是一个promise，也能运行，但是eslinet会认为你再浪费资源，给你报错提示，但是依旧是可以运行的。
1.2如果await后面跟的是promise，他就会阻止后面代码的运行，等待他运行完。这时候，如果你写了一个需要等待的异步代码，而不用await，就会只返回一个promis pendding（正在运行中）。所以加上await，等它运行完了再去地址寻值。
2.1用了await就要让他所处的代码块为async。
2.2那写了异步以后就要循环套了？（这时候接着往下思考就会陷入上面说的套用函数时候出现的死循环）不是的。出现了异步代码，也不一定需要用等待。只有我们要用到返回值的时候，才需要等待。如例子中的1中的一部分（分发部分），6步分发，不在乎返回值，不需要等待。例子2，需要等待，才加await