[TIL #12] async/await 로 리팩토링

오늘 한일

• async , await, promise 공부
• 데이터를 async, await를 이용하여 refactoring 하기

async,await 개념

고민한 내용

class HttpError extends Error {
  constructor(response) {
    super(`${response.status} for ${response.url}`);
    this.name = 'HttpError';
    this.response = response;
  }
}


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 로 리팩토링해야한다.

fetch 함수 : browser에서 네트워크 통신을 할 수 있도록 해두는 함수 -> 결과 promise를 반환
loadJson() : url을 입력받아 Fetch함수를 호출하고 통신 성공시 결과를 반환

성공했을 경우 .then 부분이 alert됨.
존재하지 않는 경우에는 catch부분으로 넘어감

async function fetchData() {
  const res = await fetch(url);
  const title = await res.json();
}

이런식으로 선언해봤는데, 에러처리를 하는것에 어려움이 있어서 고민이 되었다.

해결방안

class HttpError extends Error {
  constructor(response) {
    super(`${response.status} for ${response.url}`);
    this.name = 'HttpError';
    this.response = response;
  }
}


async function loadJson(url) {
	// promise then 부분
  let response = await fetch(url);
  if (response.status == 200) {
        return response.json();
    } else {
        throw new HttpError(response);
    }
}

async function narutoIsNotOtaku() {

  let title;
  while(true) {
    title = prompt("애니메이션 제목을 입력하세요.", "naruto");
		// promise 체이닝 catch 부분 -> try catch문 사용해서 동일 로직 시행 가능
    try {
      res = await loadJson(`https://animechan.vercel.app/api/random/anime?title=${title}`);
      break;
    } catch(err) {
      if (err instanceof HttpError && err.response.status == 404) {
        alert("일치하는 애니메이션이 없습니다. 일반인이시면 naruto, onepiece정도나 입력해주세요.");
      } else {
        throw err;
      }
    }
  }


  alert(`${res.character}: ${res.quote}.`);
  return res;
}

narutoIsNotOtaku();

함수 앞에 async를 썼다는건 함수가 비동기적이다라는 뜻
위에서 통신을 요청하는 부분만 await 부분을 추가해줌

사용자의 입력이 될때까지 기다려야하니까 while문 사용.
무조건 돌도록 해야하니 (true) 사용 -> 사용자의 입력이 들어왔을때 비동기 통신 요청 break문
prompt: 브라우저에서 사용자의 입력을 받음
그리고 try-catch문을 활용했다. 할당을 햊ㄹ때 loadJson이 비동기 키워드 이니까 await로 로직이 돌지 않도록 막았다.

오늘의 회고

await랑 비동기적을 자주 쓰게 될거같아서, 예제를 많이 보고 또 많이 리팩토링 해봐야겠다.