[JS] 비동기 (2)

김다빈·2023년 8월 24일

자바스크립트

목록 보기

17/36

📌 Resolve, Reject, 에러 핸들링

const delayAdd = index => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (index > 10) {
        reject(`${index}는 10보다 클 수 없습니다.`)
        return
      } else {
        console.log(index)
        resolve(index + 1)
      }
    }, 1000);
  })
}

then, catch 구문

delayAdd (13)
  .then(res => console.log(res)) //resolve의 인수가 들어감
  .catch(res => console.error(res)) //reject의 인수가 들어감
  .finally(() => console.log('끝!')
//13는 10보다 클 수 없습니다.
//끝!

delayAdd (4)
  .then(res => console.log(res))
  .catch(res => console.error(res))
  .finally(() => console.log('끝!')
//4
//5
//끝!

async, await 패턴 (try, catch 구문)

const wrap = async () => {
  try { //resolve의 인수가 들어감
    const res = await delayAdd(13)
    console.log(res)
  } catch (err) { //reject의 인수가 들어감
    console.error(err)
  } finally {
    console.log('끝!')
  }
}

wrap()
//13는 10보다 클 수 없습니다.
//끝!

finally

Promise 가 resolve 되던 reject 되던 상관없이 지정된 함수를 실행한다.

영화 예제

const getMovies = movieName => {
  return new Promise((resolve, reject) => {
    fetch(`https://www.omdbapi.com/?apikey=d64da9e1&s=${movieName}`)
      .then(res => res.json())
      .then(json => {
        if (json.Response === 'False') {
          reject(json.Error)
        } else {
          resolve(json)
        }
      })
      .catch(error => {
        reject(error)
      })
  })
}

let loading = true;

then, catch 구문

getMovies('frozen')
  .then(movies => console.log('영화 목록: ', movies))
  .catch(error => console.error('에러 발생: ', error))
  .finally(() => {
    loading = false
    console.log(loading)
  })

async, await 패턴 (try, catch 구문)

const wrap = async () => {
  try {
    const movies = await getMovies('frozen')
    console.log('영화 목록: ', movies)
  } catch(error) {
    console.error('에러 발생: ', error)
  } finally {
    loading = false
    console.log(loading)
  }
}

wrap()

실행 결과

console.log(json) 실행 결과

📌 반복문에서 비동기 처리

결론부터 말하자면 비동기 코드를 반복문을 돌려 처리하려면

forEach 메소드는 사용 ❌ ➡️ 순서를 보장할 수 없음

for문 사용 ⭕ ➡️ 배열은 for of 사용

const getMovies = movieName => {
  return new Promise(resolve => {
    fetch(`https://www.omdbapi.com/?apikey=d64da9e1&s=${movieName}`)
      .then(res => res.json())
      .then(res => resolve(res))
  })
}

const titles = ['frozen', 'avengers', 'propose'];

forEach 메소드

//forEach 메소드는 순서를 보장할 수 없음
titles.forEach(async title => {
  const movies = await getMovies(title);
  console.log(title, movies);
})

forEach 실행 결과

for of 반복문

//배열의 반복을 위해 for of 반복문 사용
const wrap = async () => {
  for (const title of titles) {
    const movies = await getMovies(title);
    console.log(title, movies);
  }
}

wrap()

for of 실행 결과

📌 fetch 메소드

fetch('주소', {옵션})

주소는 string 형태로, 옵션은 Object 객체 형태로 작성

fetch('https://www.omdbapi.com/?apikey=d64da9e1&s=avengers', {
  method : 'GET',
  headers : {
    'Content-Type' : 'application/json'
  },
  body : {
    name : 'HAPPY',
    age : 80,
    email : '99aa@gmail.com'
  }
})

옵션 부분은 이런게 있다는 것만 알아두고 나중에 사용할 때 다시 살펴보면 좋겠다.

.then()

fetch 메소드를 통해 갖고온 결과 res 에서 json 메소드를 호출해야지만 그 결과를 꺼낼수 있다.

fetch('https://www.omdbapi.com/?apikey=d64da9e1&s=avengers')
  .then(res => res.json())
  .then(json => console.log(json))

async, await 패턴

res.json() 이 반환하는 것은 promise 객체이기 때문에 await 키워드 붙여야 함

const wrap = async () => {
  const res = await fetch('https://www.omdbapi.com/?apikey=d64da9e1&s=avengers')
  const json = await res.json()
  console.log(json)
}

wrap()