완벽하게 Vue.js

[Vue.js][Ch4][영화검색 사이트] 비동기 - API 비동기 처리 연습

써치킴 2022. 4. 25. 04:11

1. 구글에 axios cdn 검색 > https://cdnjs.com/libraries/axios 이동 > 스크립트 태그 복사

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2. index.html에 붙여넣기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="./main.js" ></script> 
</head>
<body>
  
</body>
</html>

3. main.js에서 영화정보를 가져오는 코드 구현

function fetchMovies(title) {
  const OMDB_API_KEU = '7035c60c';
  return new Promise(async (resolve, reject) => {
    /* await 키워드를 붙여서 요청에 대한 응답을 기다림
    *  => await를 사용하는 함수에 async를 붙여줘야함 
    *  => callback 함수에서 사용하고 있으므로 callback 함수 앞에 async를 붙여줌
    */ 
    const res = await axios.get(`https://omdbapi.com?apikey=${OMDB_API_KEU}&s=${title}`);
    resolve(res);     // 응답받은 데이터를 resolve로 반환
  });
}

async function test() {
  // async, await를 사용하지 않으면 res에 promise를 반환하는데
  // async, await를 사용하여 promise를 기다리게하고
  // 영화정보를 갖고있는 데이터가 출력됨
  const res = await fetchMovies('frozen'); 
   
}

test();
  •  await를 사용하는 함수는 async를 붙여줘야한다.

유효하지 않은 OMDB KEY를 사용하면 401 에러가 발생한다.

try catch문을 사용한다.

function fetchMovies(title) {
  /* 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. */
  const OMDB_API_KEU = '7035c60c123';
  return new Promise(async (resolve, reject) => {
    /* await 키워드를 붙여서 요청에 대한 응답을 기다림
    *  => await를 사용하는 함수에 async를 붙여줘야함 
    *  => callback 함수에서 사용하고 있으므로 callback 함수 앞에 async를 붙여줌
    */ 
   try {
      const res = await axios.get(`https://omdbapi.com?apikey=${OMDB_API_KEU}&s=${title}`);
      /* 이행(fulfilled): 연산이 성공적으로 완료됨. */
      resolve(res);     // 응답받은 데이터를 resolve로 반환
    } catch (error) {
      console.log('error', error.message);
      /* 거부(rejected): 연산이 실패함. */
      reject('SEARCHKIM??');    // 메시지 반환
    }
  });
}

async function test() {
  try {
    // async, await를 사용하지 않으면 res에 promise를 반환하는데
    // async, await를 사용하여 promise를 기다리게하고
    // 영화정보를 갖고있는 데이터가 출력됨
    const res = await fetchMovies('frozen'); 
    console.log(res);
  } catch (error) {
    console.log(error);
  }
}

function hello() {
  fetchMovies('jobs')
    .then(res => console.log(res))
    .catch(msg => console.log(msg))
    
}

test();
hello();

  • 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
    • 함수가 실행되기 전 부분
  • 이행(fulfilled): 연산이 성공적으로 완료됨.
    • resolve 파라미터가 실행되는 부분
  • 거부(rejected): 연산이 실패함.
    • reject 파라미터가 실행되는 부분