Promise

김태완·2021년 10월 17일
0

프론트엔드

목록 보기
3/30

외부에서 json형태의 데이터를 불러올때 promise타입으로 불러와져서 선행이 필요해서 공부하였다.
JS에서 원래 비동기 처리를 하기위해선 콜백함수를 사용했는데 콜백함수의 경우 2가지 단점이 있다.

콜백함수의 단점 2가지

  1. 비동기 함수의 처리결과를 반환하는 경우 순서가 보장되지않으므로 후속처리를 할 수없다. 따라서 비동기 함수의 처리결과는 콜백함수 내에서 처리를 해야하는데 이 경우 콜백헬이 생긴다

  2. 두번째는 에러처리의 문제
    아래 경우 settimeout이 발생직후 호출스택에서 제거된 후 tick함수가 실행이 되는데 실행후 상황에선 settimeout이 호출스택에 없기때문에 콜백함수의 호출자가 아니게된다.
    따라서 settimeout에서 발생된 에러는 catch문에 잡히지 않기때문에 프로세스는 종료된다. (정확한 이해 후 다시 수정필요..)

try {
  setTimeout(() => { throw new Error('Error!'); }, 1000);
} catch (e) {
  console.log('에러를 캐치하지 못한다..');
  console.log(e);
}

Promise의 과정

  • pending(수행 전)

  • fulfilled(성공) : resolve 호출

  • rejected(실패) : reject 호출

  • settled(수행 후)

    Promise 후속메소드

  • then : 2개의 콜백인자를 받으며 (성공시, 실패시), promise를 반환한다

  • catch : 예외가 발생하면 호출되며 promise를 반환한다.

    Promise는 아래 2가지 방법으로 처리한다

    단, async, await방식을 더 선호하는것같다.

    // then 사용
    fetch.get('url')
    .then((res) => res.json)
    .then((json) => console.log(json))
    
    //async await 사용
    const getData = async () => {
    	const res = await fetch.get(url)
       console.log(res);
    }
profile
프론트엔드개발

0개의 댓글