从一次disabled不生效引发的对js执行机制(宏任务和微任务)的理解

如图，点击某个按钮触发当前弹框，需要对已有配置数据进行判断从而选择是否禁用图中下拉选择框。

需要调图中接口来获得配置的数据，其需要两个参数，其中的一个参数systemType是英文名，而其需要从当前弹出框对应的行数据row里获得，并且只能获取到中文名，那么必须拿到后台管理配置好的英文和中文对应的系统类型配置数据才能匹配。如图：

拿到系统类型配置数据需要调这个接口，图中参数dictionaryType：systemType为必传。
那么一开始我的代码是这样写的：

一开始调用getData()这个方法拿系统类型配置好的数据，拿到数据之后把系统类型数据遍历，遍历匹配系统类型的中文字段，然后调用getReserveParamList()这个方法拿到是否禁用下拉框的配置数据

这里的坑在于调用getData()这个方法里面的.then后续它是一个微任务，不会等他执行完再去执行
this.dictSystemTypeData.forEach()这个方法，而是直接执行this.dictSystemTypeData.forEach(),但是此时this.dictSystemTypeData这个数组是this.getData()获得的，也就是此时这个遍历方法也不会执行，而是执行以下代码

此时弹窗已经打开，但是因为没有执行this.dictSystemTypeData.forEach()，所以就拿不到该方法获得的this.isOpenDivice数据，也就无法使禁用生效

总结：js执行机制：
js为单线程（主线程）
宏任务：js渲染 ui渲染 定时器(setTimeout/setInterval/setImmdiate) I/o
微任务：promise process.nextTick Object.observe MutationObserver
Vue.nextTick(function() {}) 既使用宏任务又使用微任务。优先使用Promise,再H5api（MutationObserver），setTimeout、setImmdiate
script宏任务先执行,之后的执行过程都是先清空微任务 再执行宏任务
如果一个宏任务依赖于另一个宏任务里微任务提供的数据，那么该宏任务代码会出现无法运行的问题，不能将他们放在一个方法里同时作为宏任务执行，必须将另一个宏任务放在其他地方运行完先拿到数据之后才能执行该宏任务。
举个例子：

 setTimeout(() => {
//宏任务
    console.log('timeout1');
    //微任务
    Promise.resolve().then(() => {
    //宏任务
        console.log('success');
    });
}, 0);

//微任务
Promise.resolve().then(() => {
//宏任务
    console.log('success2');
    //宏任务
    setTimeout(() => {
    //宏任务
        console.log('timeout2');
    })
});
//微任务
Promise.resolve().then(() => {
//宏任务
    console.log('success3');
});

打印顺序// success2 success3 timeout1 success timeout2
复制代码