Promise(프라미스)

Vorhandenheit ·2021년 9월 27일

목록 보기

23/29

Promise

문법

let promise = new Promise(function(resolve, reject) {
  // executor
});

1. excutor(실행자, 실행 함수)

new Promise에 전달되는 함수를 excutor이라고 부름
excutor은 new Promise가 만들어질 때 자동으로 실행
resolve와 reject는 자바스크립트에서 자체 제공하는 콜백
- resolve(value) : 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
- reject(error) : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

excutor은 자동으로 실행되는데 , 처리가 끝나면 executor 처리 성공 여부에 따라 resolve나 rejuect를 호출

stats : 처음에는 "pending"(보류) 였다가 resolve가 호출되면 "fulfilled", reject가 호출되면 "rejected"로 변함
result : 처음에는 undefined 이었다 resolve(value)가 호출되면 value로, reject(error)가 호출되면 error로 변함

2.작동과정

let promise = new Promise(function(resolve, reject) {
  // 프라미스가 만들어지면 executor 함수는 자동으로 실행됩니다.

  // 1초 뒤에 일이 성공적으로 끝났다는 신호가 전달되면서 result는 'done'이 됩니다.
  setTimeout(() => resolve("done"), 1000);
});

executor은 new Promise에 의해 자동으로 즉각적으로 호출됨
excutor은 인자로 resolve와 reject함수를 받음, 다만 resolve나 reject 중 하나는 반드시 호출해야함

fulfilled promise(약속이 이행된 프라미스)

excutor 처리가 시작 된 지 1초 후, resolve("done")이 호출되고 결과가 만들어짐, promise객체는 위와 같이 변함

settled promise(처리된 프라미스)

이행혹은 거부 상태의 프라미스, 반대되는 프라미스로 대기 상태의 프라미스가 있음

처리가 끝난 프라미스에 resolve와 reject를 호출하면 무시됨

3.소비자: then, catch, finally

프라미스 객체는 executor 결과나 에러를 받을 소비함수를 이어주는 역할을 함
소비함수는 .then .catch .finally 메서드를 사용해 등록됨

1) then

기본이 되는 메서드

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

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

2)catch

에러를 발생한 경우만 다루고 싶다면, .then(null, errorHandingFunction)같이 null 첫 번째 인수로 전달하면 됨 or .catch(errorHandingFunction)를 쓰면됨
.catch는 .then에 null 전달하는 것과 동일하게 작동
.catch(f)는 문법이 간결하다는 점만 빼고 .then(null, f)와 완벽하게 같음

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// .catch(f)는 promise.then(null, f)과 동일하게 작동합니다
promise.catch(alert); // 1초 뒤 "Error: 에러 발생!" 출력

3) finally

프라미스가 처리되면(이행이나 거부) f가 항상 실행된다는 점에서 .then(f, f)와 유사

new Promise((resolve, reject) => {
  /* 시간이 걸리는 어떤 일을 수행하고, 그 후 resolve, reject를 호출함 */
})
  // 성공·실패 여부와 상관없이 프라미스가 처리되면 실행됨
  .finally(() => 로딩 인디케이터 중지)
  .then(result => result와 err 보여줌 => error 보여줌)