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

비동기 처리 연습을 위해

아래 사이트에서 스크립트 url을 가져온다.

https://cdnjs.com/libraries/axios

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

 

resolve: 비동기 처리에 성공했을때 실행되는 메소드

reject: 비동기 처리에 실패했을때 실행되는 메소드

 

예제 코드

// Promise는 다음 중 하나의 상태를 가집니다.

// 대기(pending): 이행하거나 거부되지 않은 초기 상태.
// 이행(fulfilled): 연산이 성공적으로 완료됨.
// 거부(rejected): 연산이 실패함.

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

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

test()

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

hello()

 

브라우저 확인

 

실패할 경우 테스트

// Promise는 다음 중 하나의 상태를 가집니다.

// 대기(pending): 이행하거나 거부되지 않은 초기 상태.
// 이행(fulfilled): 연산이 성공적으로 완료됨.
// 거부(rejected): 연산이 실패함.

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

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

test()

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

hello()

 

브라우저 확인