附件列图片获取改为PromiseAll

情况：

• 后端传过来的附件信息与其他表单信息放在了一个对象里。
• 附件信息的值不是图片而是图片id字符串（多个图片会有,分割）

我需要做的：

• 提取出所有的代表附件的参数。
• 通过id走图片接口获取到图片地址。
• 图片和前端参数对应。

以前采用的是非常简单有效但很慢的循环+await。真的太太太慢了，所以决定改为PromiseAll。

• 建立前端属性名和后端参数名的对应配置对象。

export const apiName = {
  前端属性名: "后端参数名",
  backCard: "bank_card",
  profilePicture: "profile_picture",
  ......
};

•  生成对应数组

/**
 * @description: 生成对应数组
 * @param {*} form
 * @param {*} apiData
 * @return {*}
 */
function createFormToApiName(form, apiData) {
  const keys = Object.keys(form);
  const nameValueArr = [];
  for (let i = 0; i < keys.length; i++) {
    const keyName = keys[i];
    if (keyName in apiName) {
      const imgIdsStr = apiData[apiName[keyName]];
      if (!!imgIdsStr) {
        const imgIdArr = imgIdsStr.split(",");
        imgIdArr.forEach(id => {
          nameValueArr.push({
            name: keyName,
            imgId: id
          });
        });
      }
    }
  }
  return nameValueArr;
}

• PromiseAll

export function getImgByIdOmPromiseAll(arr) {
  const promises = arr.map(item => {
    return getImgOnApi(item);
  });
  return Promise.all(promises);
}
function getImgOnApi({ name, imgId }) {
  return new Promise((resolve, reject) => {
    apiGetImage(imgId)
      .then(res => {
        if (res.data) {
          ...数据处理
          resolve({
            name,
            imgUrl: res.data
          });
        } else {
          reject("图片获取失败");
        }
      })
      .catch(err => {
        reject("连接频繁，请稍后再试！");
      });
  });
}

• 拼起来

/**
 * @description: 设置api图片信息
 * @param {*} form
 * @param {*} apiData
 * @return {*}
 */
export async function setApiAttachment(form, apiData) {
  const nameValueArr = createFormToApiName(form, apiData);
  if (nameValueArr.length > 0) {
    getImgByIdOmPromiseAll(nameValueArr)
      .then(res => {
        res.forEach(item => {
          form[item.name].push(item.imgUrl);
        });
      })
      .catch(reason => {
        Message.error(reason);
      });
  }
}

整体大概就是这个思路~粗糙记下