Promise

.esc·2021년 2월 17일

Promise

자바스크립트에서 비동기 처리를 하기 위해 Promise객체를 사용할 수 있다.

기본 문법

resolve와 reject는 자바스크립트가 제공하는 콜백 함수로 따로 만들 필요가 없다.
executor는 자동으로 실행되는데, 처리가 끝나면 성공 여부에 따라 콜백 중 하나를 반드시 호출해야 한다.
- resolve(value): 성공했을 경우, 결과 value와 함께 호출한다.
- reject(error): 에러가 발생했을 경우, error와 함께 호출한다.

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

then

.then은 promise에서 가장 중요하고 기본이 되는 메서드이다.
- 첫번째 함수: 이행되었을 때 실행
- 두번째 함수: 거부되었을 때 실행

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

// 이행되었을 때만 다루고 싶다면 인수를 하나만 전달하여 사용 가능
promise.then(f);

catch

에러가 발생한 경우만 다룰 때 사용할 수 있다.

// 동일하게 작동한다.
promise.catch(f);
promise.then(null, f);

resolve, reject

executor는 new Promise가 만들어지면 자동으로 실행된다.

대기(pending)상태의 promise객체 내부 프로퍼티
- state: "pending"
- result: undefined

resolve(value)

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done"), 1000);
});

promise.then(
  result => console.log(result), // 1초 후 "done"출력
  error => console.log(error) // 실행되지 않음
);

executor 처리가 시작된지 1초 후 resolve("done")이 호출된다.

이행(resolved)상태의 promise객체

state: "fulfilled"

result: "done"

reject(error)

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error("error!")), 1000);
});

promise.then(
  result => console.log(result), // 실행되지 않음
  error => console.log(error) // 1초 후 "error!"출력
);

executor 처리가 시작된지 1초 후 reject(...)이 호출된다.

거부(rejected)상태의 promise객체

state: "rejected"

result: error

연습

https://velog.io/@esc/callback 의 콜백 함수 대신 promise 사용해보기

function loadScript(scriptUrl) {
  return new Promise(function(resolve, reject) {
    let script = document.createElement('script');
    script.src = scriptUrl;

    script.onload = () => resolve(scriptUrl);
    script.onerror = () => reject(new Error("error!"));

    document.head.append(script);
  });
};

let promise = loadScript('./script.js');
promise.then(
  result => { /* 결과 */ },
  error => { /* 에러 */ }
);

// .then을 원하는 만큼 호출할 수 있다.
promise.then( 
  result => { /* 또 다른 결과 */ }
);