promise数组循环异步

真烦

首先我在使用了forEach和map进行循环，并在循环体中加入异步代码发现二者皆不生效后，投奔了for循环的怀抱，我要处理的是使用html2canvas进行截图并且该函数返回一个promise进行后续操作

最终代码

  async getScreen() {
    const { data } = this.props;
    const dslData = await getDSL(data);
    const modules = dslData.modules || [];

    let promises = [];
    modules.map((mo) => {
      let groupNodes = mo.groupNodes;
      for (let i = 0; i < groupNodes.length; i++) {
        let group = groupNodes[i];
        const configStyle = group.configStyle || {};
        const moduleConfig = group.moduleConfig || {};
        const compName = group.compName || '';
        const { fontSize, fontFamily, color, fontWeight, textContent } = moduleConfig;
        if (Object.keys(configStyle).length !== 0 && compName === 'image') {
          promises.push(
            new Promise((resolve, reject) => {
              const { width, height, left, top } = configStyle;
              const captureArea = document.getElementById(group.id);
              if (captureArea) {
                html2canvas(captureArea).then((canvas) => {
                  let dataURL = canvas.toDataURL('image/png');
                  resolve({ url: dataURL, width, height, left, top, compName });
                });
              }
            })
          );
        } else if (Object.keys(configStyle).length !== 0 && compName === 'text') {
          promises.push(
            new Promise((resolve, reject) => {
              console.log('configStyle-111', configStyle, Object.keys(configStyle).length !== 0);
              const { width, height, left, top } = configStyle;
              resolve({
                width,
                height,
                left,
                top,
                compName,
                fontSize,
                color,
                bold: fontWeight === 'bolid' ? true : false,
                fontFace: fontFamily,
                textContent,
              });
            })
          );
        }
      }
    });
    return Promise.all(promises);
  }