# Promise

김승훈·2021년 6월 10일
0

JavaScript

목록 보기
14/16

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자

, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다.

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다.

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백함수를 사용하여 처리한다. 하지만 전통적인 콜백 패턴은 콜백헬로 가독성이 나쁘고 비동기 처리중 발생한 에러 처리가 불편하다. / 여러 개의 비동기 처리를 한번에 처리하기에 한계가 있음.

ES6에서는 비동기 처리를 위한 Promise를 도입했다.

프로미스는 전통적인 콜백 패턴의 단점을 보완하고, 비동기 처리 시점을 명확하게 표현할 수 있다.

콜백 패턴의 단점

비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting, 중첩)되어 복잡도가 높아지는 콜백 헬(Callback Hell)이 발생하는 단점이 있다.

에러 처리의 한계

콜백 방식의 비동기 처리가 갖는 문제점 에러처리가 곤란하다.!

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

try 블록 내에서 setTimeout 함수가 실행되면 1초 후에 콜백 함수가 실행되고 이 콜백 함수는 예외를 발생시킨다. 하지만 이 예외는 catch 블록에서 캐치되지 않는다.

???? 콜백 함수에 이벤트가 발생하면 테스크 큐로 이동한 후 콜 스택이 비어졌을 때 호출스택으로 이동되어 실행된다. (이벤트루프)

setTimeout 함수는 비동기 함수이므로 콜백 함수가 실행될 때까지 기다리지 않고 즉시 종료되어 호출 스택에서 제거된다. setTimeout 함수의 콜백 함수 내에서 발생시킨 에러는 catch 블록에서 캐치되지 않아 프로세스는 종료된다.

출처 - https://poiemaweb.com/es6-promise

캡틴판교님의 promise

Promise?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.

비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.

필요한 이유

서버에서 받아온 데이터를 화면에 표시할 때 사용.

api 요청 중 데이터를 받아오기도 전에 마치 데이터를 다 받아 온 것 마냥 화면에 표시하려고하면 오류가 발생 이와 같은 문제를 해결하기한 방법

프로미스의 3가지 상태(states)

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)입니다. 여기서 말하는 상태란 프로미스의 처리 과정을 의미합니다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다.

  • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
  • Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

참고하면 좋은 블로그 :

https://humahumahuma.tistory.com/210

https://ko.javascript.info/promise-basics

https://jeong-pro.tistory.com/128

https://sangminem.tistory.com/284

0개의 댓글