모든 이미지를 불러와서 height 를 더해보자

[아슬아슬하게 순차 비동기 호출 성공한 코드]

const loadImage = (url) =>
  new Promise((resolve, reject) => {
    let img = new Image();
    img.src = url;
    img.onload = function () {
      resolve(img);
    };
  });

async function f1(imgs) {
  const total = await imgs
    .map(async ({ url }) => {
      const img = await loadImage(url);
      return img.height;
    })
    .reduce(async (total, height) => (await total) + (await height), 0);

  console.log(total);
}

const imgs = [
  {
    url:
      "<https://img.thedailybeast.com/image/upload/v1531451526/180712-Weill--The-Creator-of-Pepe-hero_uionjj.jpg>"
  },
  {
    url:
      "<https://static01.nyt.com/images/2016/09/28/us/17xp-pepethefrog_web1/28xp-pepefrog-articleLarge.jpg?quality=75&auto=webp&disable=upscale>"
  },
  {
    url:
      "<https://img.thedailybeast.com/image/upload/v1531451526/180712-Weill--The-Creator-of-Pepe-hero_uionjj.jpg>"
  },
  {
    url:
      "<https://www.texasobserver.org/wp-content/uploads/2020/09/pepe_poster-1536x940.jpg>"
  }
];

f1(imgs);

[중간에 잘못된 주소로 에러가 터졌다면?? 과연 처리가 가능할까]

흠.. 에러가 터졌군 try catch 해보자

const loadImage = (url) =>
  new Promise((resolve, reject) => {
    let img = new Image();
    img.src = url;
    img.onload = function () {
      resolve(img);
    };
  });

async function f1(imgs) {
  const total = await imgs
    .map(async ({ url }) => {
      try {
        const img = await loadImage(url);
        return img.height;
      } catch (e) {
        console.log(e);
      }
    })
    .reduce(async (total, height) => (await total) + (await height), 0);

  console.log(total);
}

const imgs = [
  {
    url:
      "<https://img.thedailybeast.com/image/upload/v1531451526/180712-Weill--The-Creator-of-Pepe-hero_uionjj.jpg>"
  },
  { // 이상한 주소로 에러 만듦
    url:
      "https343434://s3434tatic01.nyt.com/images/2016/09/28/us/17xp-pepethefrog_web1/28xp-pepefrog-articleLarge.jpg?quality=75&auto=webp&disable=upscale"
  },
  {
    url:
      "<https://img.thedailybeast.com/image/upload/v1531451526/180712-Weill--The-Creator-of-Pepe-hero_uionjj.jpg>"
  },
  {
    url:
      "<https://www.texasobserver.org/wp-content/uploads/2020/09/pepe_poster-1536x940.jpg>"
  }
];

f1(imgs);

try catch 해도 안 잡힌다 → Promise reject 처리가 안되있어서 에러를 못가지고 온다

const loadImage = (url) =>
  new Promise((resolve, reject) => {
    let img = new Image();
    img.src = url;
    img.onload = function () {
      resolve(img);
    };
    img.onerror = function (e) {
      reject(e);
    };
  });

• Promise reject 처리 로 에러는 이제 뜬다

  

결과가 NaN 인것도 싫은데

• error가 나면 0을 출력하고 싶다

async function f1(imgs) {
  try {
    const total = await imgs
      .map(async ({ url }) => {
        try {
          const img = await loadImage(url);
          return img.height;
        } catch (e) {
          console.log(e);
          throw e;
        }
      })
      .reduce(async (total, height) => (await total) + (await height), 0);
    console.log(total);
  } catch (e) {
    console.log(0);
  }
}

• 내부 try catch에서 throw error 하고 좀더 상위에서 try catch 한번 더쓰고 0 출력 해보자

  

무슨 문제가 있을까?

• 두번째 호출에서 에러가 났음에도 시도를 계속 했다

  const loadImage = (url) =>
    new Promise((resolve, reject) => {
      console.log("이미지 로드", url);
      let img = new Image();
      img.src = url;
      img.onload = function () {
        resolve(img);
      };
      img.onerror = function (e) {
        reject(e);
      };
    });
  

  

• 에러 핸들링보다 심각한 버그가 있는 코드다

  • 불필요한 부하가 있다
  • 단순 이미지를 받는게 아니라 POST 를 날리는거면 데이터를 망가뜨릴 것이다

어거지로 시도했지만 실패한 나쁜 코드

async function f1(imgs) {
  let error = null;
  try {
    const total = await imgs
      .map(async ({ url }) => {
        if (error) return;
        try {
          const img = await loadImage(url);
          return img.height;
        } catch (e) {
          console.log(e);
          throw e;
        }
      })
      .reduce(async (total, height) => (await total) + (await height), 0);
    console.log(total);
  } catch (e) {
    error = e;
    console.log(0);
  }
}

• 당연히 여전하다..