[JavaScript] 4주차 - 과제 수행 (async, await)

아래 코드를 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 koreanMovie() {
    return loadJson(`https://klassic-quote-api.mooo.com/v1/random-quote`)
    .then(res => {
            alert(`${res.author}: ${res.quote}`);
      return res;
    })
    .catch(err => {
      if (err instanceof HttpError && err.response.status == 404) {
        alert("무언가 에러가 발생했군요!");
        return koreanMovie();
      } else {
        throw err;
      }
    });
}

koreanMovie();

 

 

이제 async, await를 이용해 동기적 표현으로 만들어보자

async function loadJson(url) {  // => function 앞에 async 붙이고 비동기적 함수를 동기적으로 만들어준다!
  
  const response = await fetch(url);  // => 원래 then에서 받아왔던 response를 따로 선언해주기

  if (response.status == 200) {  
    return response.json();
  } else {
    throw new HttpError(response);
  }  // => then에서 받던걸 따로 변수로 선언해줬으니 응답이 정상적으로 들어오면 (status == 200), 
           response.json()을 내어주고, 그렇지 않으면 에러 발생
}

 

첫번째 함수는 리팩토링 완료

 

async function koreanMovie() {
  let res;  // => 원래 then으로 받았던 res를 변수 선언해주고 아래 while문 안에서 할당해줌. 
                  왜냐면 while문 안에서 변수를 끊임없이 선언해 줄 필요가 없기때문에
                  
  while (true) {   // => (true)는 계속 끊임없이 while문을 돌리겠다는 뜻
    try {  
      res = await loadJson(
        `https://klassic-quote-api.mooo.com/v1/random-quote`
      );   
      // => try, catch문을 통해 성공시, 실패시를 나타낸다.
      
      break;  // => 성공하면 break를 걸어 while문을 빠져나간다.
      
    } catch (err) {   // => 에러 발생 시 catch문을 통해 에러 발생을 통보해준다.
    
      if (err instanceof HttpError && err.response.status == 404) {
        alert("무언가 에러가 발생했군요!");
        return koreanMovie();
      } else {
        throw err;
      }
    }
  }

  alert(`${res.author}: ${res.quote}`);
  return res; // => 성공했을때 while문을 빠져나와 res를 리턴해준다.

 

두번째 함수도 리팩토링 완성!