TIL_2023.05.24

function loadJson(url) {
  return fetch(url).then((response) => {
    if (response.status == 200) {
      return response.json();
    } else {
      throw new HttpError(response);
    }
  });
}

function narutoIsNotOtaku() {
  let title = prompt("애니메이션 제목을 입력하세요.", "naruto");

  return loadJson(
    `https://animechan.vercel.app/api/random/anime?title=${title}`
  )
    .then((res) => {
      alert(`${res.character}: ${res.quote}.`);
      return res;
    })
    .catch((err) => {
      if (err instanceof HttpError && err.response.status == 404) {
        alert(
          "일치하는 애니메이션이 없습니다. 일반인이시면 naruto, onepiece 정도나 입력해주세요!"
        );
        return narutoIsNotOtaku();
      } else {
        throw err;
      }
    });
}

narutoIsNotOtaku();

특정 제목들을 입력하면 그에 맞는 텍스트가 출력/ 목록에 없는 제목일 경우 실패 메세지가 출력되는 코드이다. 여기서 async/await을 통해서 리팩토링 하는 과정을 연습해 보았다.

---

async function loadJson(url) {
  const response = await fetch(url);
  if (response.status == 200) {
    return response.json();
  } else {
    throw new HttpError(response);
  }
}

async를 사용하기 위해 function 앞에 기재 후
response을 선언하고 await을 통해서 fetch(url)값을 받아올때까지 기다리게 만들었다.

---

문제는 narutoIsNotOtaku 함수였다.

async function narutoIsNotOtaku() {
  var res;
  var title = prompt("애니메이션 제목을 입력하세요.", "naruto");
  res = await loadJson(
    `https://animechan.vercel.app/api/random/anime?title=${title}`
  );
  if (res.character !== undefined) {
    alert(`${res.character}: ${res.quote}.`);
    return res;
  }
}

prompt를 통해서 받은 값(title)을 await loadJson()에 title로 집어넣어서 res값을 할당하는 것 까지 성공했다. 그러한 상황에서 '정보를 불러오는데에 성공을 했다.'라는 것을 판별을 어떻게 할까 고민하다가 res의 프로퍼티로 .character이나 .quote 값이 존재한다는게 눈에 띄어서 if문을 통하여 res.character값이 undefined가 아닐 경우 alert을 나타내도록 코드를 짰다.

하지만 이러한 상황에서 err값, 즉 작성한 title값이 목록에 없을 경우 반환된 err값을 받아줄 수가 없었다...(else 등을 사용해보았으나 전부 실패했다...)

---

err값을 받아오는 방법으로 예외처리를 해주는
try catch문이 있었다.

async function narutoIsNotOtaku() {
  var title = prompt("애니메이션 제목을 입력하세요.", "naruto");
  try {
    var res = await loadJson(
      `https://animechan.vercel.app/api/random/anime?title=${title}`
    );
    alert(`${res.character}: ${res.quote}.`);
    return res;
  } catch (err) {
    if (err instanceof HttpError && err.response.status == 404) {
      alert(
        "일치하는 애니메이션이 없습니다. 일반인이시면 naruto, onepiece 정도나 입력해주세요!"
      );
      return narutoIsNotOtaku();
    } else {
      throw err;
    }
  }
}

이런식으로 if문에 넣었던 코드를 try 안쪽으로 가져오고 try안에서 res를 할당해주어야 err값도 받아올 수 있어서 위치를 옮겨주었다..

catch(err){}로 err값도 잘 받아지는 걸 확인 할 수 있었다.

---

추가적으로 try catch문에 대해서 조금 찾아보았는데

try {
  var a = "가나다라";
  console.log(a);
  basdas;
  console.log("가나다라2");
} catch (err) {
  console.log("에러입니다.");
}

출력결과
----------
가나다라
에러입니다.

위 코드에서 basdas부분은 변수 선언이 제대로 되어있지 않다.(var, let, const 누락)
따라서 try 문이 아니었다면 실행 시에 에러가 발생하면서 코드가 작동하지 않아야 정상이지만
try문 안에 위치했으므로 예외 상황이 발생한 걸로 간주되어 basdas;위의 console.log(a); 까지만 동작하고 catch문으로 넘어가는 걸 알 수 있었다.

즉 오류가 날 수 있는 것들을 try catch 문으로 넣어준다면 더 편하게 예외처리를 할 수 있을 것이다.