55 :: Promise, async/await, 리액트 심화

엘리스 SW 엔지니어 트랙 55일차

온라인 강의날

 

 

Promise

콜백 헬(콜백이 중첩 되는 것)을 좀 더 보기좋게 사용할 수 있는 기술

아직 가져오지 않은 데이터(이게 왜 Promise라고 불리는 이유일까?)에 대해

.then | .catch | .finally 등 핸들러를 붙여서

데이터 처리, 오류 처리, 정리 로직을 실행한다

 

.then 체인으로 비동기 실행을 마치 동기 실행처럼 동작하게 한다

 

Promise 사용 예시

function returnPromise() {
  return new Promise() => {
    setTimeout(() => {
      const randomNumber = generateRandomNumber(100)
      if(randomNumber < 50) resolve(randomNumber)
      else reject(new Error("Random number is too small.))
    }, 1000)
  }
}

returnPromise()
  .then(num => {
    console.log("Random number : ", num)
  })
  .catch(error =>{
    console.log("Error : ", error)
  })
  .finally(() => {
    console.log("Promise returned")
  })

finally는 .then이나 .catch가 됐을 때 사용할 수 있다. 인자는 없다

 

Promise.all()

모든 프로미스 fulfiled 되기를 기다린다

하나라도 에러시 모든 Promise 중단

 

Promise.allSettled()

모든 프로미스 settled 되기를 기다린다

resolve거나 reject거나 각 Promise 결과를 받아온다

 

Promise.race()

하나라도 settled 되기를 기다린다

 

Promise.any()

하나라도 fulfilled 되기를 기다린다

 

settled = resolve 혹은 reject

 

 

async/await

Promise를 직관적으로 사용할 수 있는 문법

Promise 체인을 안만들어도 된다.

많은 프로그래밍 언어에 있는 try/catch 문으로 에러 직관적 처리

 

여러 개의 await 사용 예시

// awaits 여러 개
async function fetchUserWithAddress(id){
  try{
    const user = await request(`/user/${id}`)
    if(!user) throw new Error("유저 없음")
    
    const address = await request(`/user/${user.id}/address`)
    if(!address.userId !== user.id) throw new Error("주소에 맞는 유저 없음")
    
    return { ...user, address}
  } catch(e) {
    console.log("error : ", e)
  }
}

먼저 에러가 catch로 들어간다

 

 

리액트 심화 실습 어렵네..

input 들어오면 보고 따라치는 코딩 기계가 되어버렸다

 

 

참고 링크

POSTMAN - API 테스트, Collection 공유

링크 => https://www.postman.com/

 

SWAGGER - Open API 문서 => 파싱해서 테스팅 도구

링크 => https://swagger.io/