TIL

[Javascript] Promise(프라미스)

rachel_13 2022. 7. 31. 19:34

Promise 객체란 무엇인가

Promise : 시간이 얼마나 걸리든 상관없이 약속한 결과를 만들어 내는 '제작 코드(producing code)가 준비되었을 때, 함수가 결과를 사용할 수 있도록 해주는 역할.

비동기 처리를 하기 위한 자바스크립트의 방식 중 하나로 콜백 패턴이 가진 단점을 보완한다.

let promise = new Promise(function(resolve, reject){
  //executor(실행자, 실행함수)
});

new Promise 에 전달되는 함수는 executor(실행자, 실행함수)이다. executor는 new Promise 가 만들어질 때 자동으로 실행됨. 결과를 최종적으로 만들어내는 제작 코드를 포함한다.

executor

executor는 보통 시간이 걸리는 일을 수행한다. 일이 끝나면 resolve, reject 함수를 호출하는데, 이 때 프라미스 객체의 상태가 변화한다.

executor의 인수 인 resolve, reject는 자바스크립트에서 자체로 제공하는 콜백 함수이다.
executor에서는 결과를 얻는 시간과 관계없이, 무조건 상황에 따라 인수로 넘겨준 콜백 중 하나를 반드시 호출해야 한다.

  • resolve(vale) : 일이 성공적으로 끝난 경우, 그 결과를 나타내는 value와 함께 호출
  • reject(error) : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

이행(resolved) 혹은 거부(rejected) 상태의 프라미스는 '처리된(settled)' 프라미스,
대기(pending) 프라미스라고 부른다.

executor는 resolve 나 reject 중 하나를 반드시 호출해야 한다. 이때 변경된 상태는 더 이상 변하지 않는다.
처리가 끝난 프라미스에 resolve, reject를 호출하면 무시된다.

promise 후속 메서드 : then, catch, finally

프라미스 객체의 state, result 프로퍼티는 내부 프로퍼티이므로 개발자가 직접근 불가
따라서 then catch finally 메서드를 사용해서 접근한다.

then

promise.then(
  function(result) { /* 결과(result)를 다룹니다 */ },
  function(error) { /* 에러(error)를 다룹니다 */ }
);

첫 번째 .then: 프라미스가 이행되었을 때 실행되는 함수, 여기서 실행 결과를 받는다.
두 번째 .then: 프라미스가 거부되었을 때 실행되는 함수, 여기서 에러를 받는다.

💡why use async/await in signup/signin?
async의 목적은 값을 즉시 반환하지 않는 것. 메서드가 await 반환 값을 사용하는 동안 코드가 다른 작업을 수행할 수 있도록 하는 것.
async가 메서드를 더 빠르게 실행하지는 않지만 서버에서 코드를 deblocking요소로 만드는 역할을 수행한다. 반환 값의 순서를 존중하면서 단순히 코드를 재정렬하기 때문에 추가 스레드를 회전시키지 않고도 수행할 수 있는 이점이 있다.

순차적으로 일이 수행되는 것이 아닌, 비동기적으로 일이 수행된다. 즉 명령문 중 일부가 작업을 시작하고 진행중인 작업을 나타내는 작업을 반환할 수 있다.
모든 작업이 동시에 시작되는데, 결과가 필요할 때만 각 작업을 기다린다. 모든 요청을 await 수행 후에 즉시 수행하고, 웹 페이지를 구성한다.