비동기 - API 비동기 처리 연습

JavaScript/JavaScript

비동기 - API 비동기 처리 연습

IT Blue 2021. 8. 5. 22:50

비동기 - API 비동기 처리 연습

<!DOCTYPE html>
<html lang="ko">
<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.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="./main.js"></script>
</head>
<body>
  
</body>
</html>

function fetchMovies(title) {
  // 대기(pending): 이행하거나 거부되지 않은 초기 상태.
  const OMDB_API_KEY = 'abcdefg123'
  return new Promise(async (resolve, reject) => {
    try {
      const res = await axios.get(`https://omdbapi.com?apikey=${OMDB_API_KEY}&s=${title}`)
      // 이행(fulfilled): 연산이 성공적으로 완료됨.
      resolve(res)
    } catch (error) {
      console.log(error.message)
      // 거부(rejected): 연산이 실패함.
      reject('ITBlue?!')
    }
  })
}

async function test() {
  try {
    const res = await fetchMovies('frozen')
    console.log(res)
  } catch (ITBlue) {
    console.log(ITBlue)
  }
}
test()

async function testHello() {
  fetchMovies('jobs')
    .then(res => console.log(res))
    .catch(ITBlue => { console.log(ITBlue) })
}
testHello()

결과

참고

https://cdnjs.com/libraries/axios

axios - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Promise based HTTP client for the browser and node.js - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Clou

cdnjs.com