비동기 코드 예시

Promise & async-await

function getMovie() {
  return new Promise(resolve => { 
    fetch('https://omdbapi.com/?apikey=7c60c&s=frozen')
      .then(res => res.json())
      .then(res => {
        resolve(res)
      })
  })
}

getMovie().then(res => console.log(res))

// async await 
;(async function () {
  const res = await getMovie()
  console.log(res)
})()

imageLoad

function imageLoad(src) {
  return new Promise(resolve => {
    const imgEl = document.createElement('img')
    imgEl.src = src
    imgEl.addEventListener('load', () => {
      resolve()
    })
  })
}

const imgConatiner = document.querySelector('.image')

imageLoad('https://gstatic.com/webp/gallery/1.jpg')
  .then(() => {
    console.log('Done!')
    imgConatiner.classList.add('done')
  })

;(async function () {
  await imageLoad('https://gstatic.com/webp/gallery/1.jpg')
  console.log('Done!')
  imgConatiner.classList.add('done')
})()

Promise.all

function getMovie() {
  Promise.all([
    fetch('https://omdbapi.com/?apikey=60c&s=frozen')
      .then(res => res.json()),  
    fetch('https://omdbapi.com/?apikey=60c&s=ironman')
      .then(res => res.json())
  ])
    .then(res => {
      console.log('fetch1:', res[0])
      console.log('fetch2:', res[1])
      console.log('Done!')
    })
}

async function getMovie() {
  const [res1, res2] = await Promise.all([
    fetch('https://omdbapi.com/?apikey=60c&s=frozen')
      .then(res => res.json()),  
    fetch('https://omdbapi.com/?apikey=60c&s=ironman')
      .then(res => res.json())
  ])

  console.log('async1:', res1)
  console.log('async2:', res2)
  console.log('Done!')
}

getMovie()

reject

function imageLoad(src) {
  return new Promise((resolve, reject) => {
    if (!src) {
      reject('이미지 경로 없는디?')
      return
    }
    const imgEl = document.createElement('img')
    imgEl.src = src
    imgEl.addEventListener('load', () => {
      resolve('이미지 로드 완료!')
    })
  })
}
// reject는 catch문으로 받는다.
imageLoad()
  .then(res => {
    console.log(res)
  })
  .catch(error => {
    console.log(error)
  })