Promise

Promise

비동기 작업을 처리할 때 사용되는 객체

 

Promise 객체의 생성과 구조

window.onload = () => {
  const promise = new Promise((resolve, reject) => {
    const count = 1 + 1;
    count === 2 ? resolve(count) : reject("Error");
  });
  
  const errPromise = new Promise((resolve, reject) => {
    const count = 1 + 1;
    count === 3 ? resolve(count) : reject("Error");
  });
};

console.log(promise)

console.log(errPromise)

1. Promise 객체는 프로토타입, 현재 상태값을 가진 PromiseState, 작업 결과값을 가진 PromiseResult 를 갖는다

2. Promise 생성자 함수는 두개의 인자를 받는 콜백 함수를 인자로 받는다

3. 콜백 함수의 첫번째 인자는 콜백 함수의 작업이 성공했을 때 PromiseState의 값을 "fullfield" 로 만들고, PromiseResult 값으로 들어갈 값을 반환하는 콜백 함수

4. 콜백 함수의 두번째 인자는 콜백 함수의 작업이 실패했을 때 PromiseState의 값을 "rejected" 로 만들고, PromiseResult 값으로 들어갈 값을 반환하는 콜백 함수

 

then

PromiseState 가 "fullfield" 일 때 실행할 콜백 함수

window.onload = () => {
  const promise = new Promise((resolve) => {
    resolve("hello");
  })

  const promiseThen = promise.then(res => res + " world");
};

console.log(promiseThen)

1. then 메서드의 인자로 콜백 함수를 넣으며, 콜백 함수의 인자는 promise 객체의 promiseResult 값이다

2. then 메서드는 콜백 함수가 반환하는 값을 PromiseResult 로 갖는 promise 객체를 반환한다

3. then 메서드의 콜백 함수가 반환하는 값이 promise 객체라면, PromiseResult 에 promise 객체가 들어가는 2중 promise 객체가 아닌, then 메서드의 콜백함수가 반환하는 promise 객체를 그대로 반환한다

 

catch

PromiseState 가 "rejected" 일 때 실행할 콜백 함수

window.onload = () => {
  const promise = new Promise((resolve, reject) => {
    reject("hello");
  })

  const promiseCatch = promise.catch(res => res + " world");
};

console.log(promiseCatch)

1. catch 메서드의 인자로 콜백 함수를 넣으며, 콜백 함수의 인자는 promise 객체의 promiseResult 값이다

2. catch 메서드의 콜백 함수가 반환하는 값을 PromuseResult로 갖는 promise 객체를 반환한다.

3. catch 메서드의 콜백 함수가 반환한느 값이 promise 객체라면 PromiseResult에 promise 객체가 들어가는 중첩된 promise가 아닌, catch 메서드의 콜백 함수가 반환하는 promise를 그대로 반환한다.

 

finally

작업 결과에 상관 없이 실행되는 메서드

window.onload = () => {
  const promise = new Promise((resolve, reject) => {
    reject("hello");
  })

  const promiseFinally = promise.finally(() => {console.log("chaning end")});
  console.log(promiseFinally);
};

1. finally 메서드는 PromiseResult 값에 관계없이 항상 실행되는 메서드이다

2. finally 메서드는 promise 객체를 반환한다

3. finally 메서드는 인자로 들어가는 콜백 함수는 어떠한 인자도 받지 않고, 반환되는 값들은 무시된다