[JavaScript] - Promise #1

1. 동기, 비동기란 무엇인가?

동기란 순차적으로 실행된다. 요청을 하면 처리가 될 때까지 기다린 후 완료가 되면 그 다음 요청을 처리하는 방식이다.

console.log('1')
console.log('2')
console.log('3')

// console.log result 1, 2, 3

비동기란 하나의 요청의 처리가 완료될 때까지 기다리지 않고, 다음 요청을 처리한다. 요청과 응답은 다른 시간대에 일어날 수 있다.

console.log('1')
setTimeout(() => console.log('2'), 1000) // setTimeout 비동기함수 1초뒤 함수 실행
console.log('3')
// console.log result 1, 3, 2

2. Promise란?

Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다. 완료 또는 실패의 값을 나타냅니다.

3. Promise를 왜 사용할까?

프로미스가 나오기 전 비동기 처리는 callback함수를 이용하여 처리했다.
하지만 그 깊이가 깊어갈 수록 유지보수도 어렵고, (소스보기가 싫어진다..) 콜백지옥에 빠지게된다. 이 단점을 해결하기 위해 프로미스가 등장했다!

callback1(function (value1) {
    callback2(function (value2) {
        callback3(function (value3) {
            callback4(function (value4) {
                callback5(function (value5) {
                    callback6(function (value6) {
                        // callback hell :(
                    });
                });
            });
        });
    });
});

4. Promise 사용법

Promise 생성

new Promise((resolve, reject) => {})

resolve 이행 reject 거부

Promise Status 상태
1. pending (대기) - 이행하거나 거부되지 않은 초기 상태
2. fulfilled (이행) - 연산이 성공적으로 완료됨
3. rejected (거부) - 연산이 실패됨

Promise Methods 메서드
1. then() - Promise를 리턴하고 두 개의 콜백 함수를 인수로 받습니다. 하나는 Promise가 이행했을 때 (resolve), 다른 하나는 거부했을 때(reject)를 위한 콜백 함수
2. catch() - Promise가 거부된 경우 호출, 거부이유를 반환 하는 하나의 인수 함수가 있다.
3. all() - 모든 프로미스가 이행한 결과값을 순회 가능한 배열형태로 받아 반환해준다.

5. Promise 예제

(팀장님이 주신 예제인데 간단하고 딱 핵심만 알려주는 예제라서 박아본다..ㅎㅎ)

  const promiseThen = new Promise(resolve => resolve(true));
  // 프로미스의 상태가 resolve가 되면 then에는 콜백함수가 들어가고 콜백함수에는 1개의 매개변수만 전달되는데 이때 전달되는 매개변수에 resolve를 호출할때 넣었던 매개변수 값이 전달 됨
  promiseThen.then(boolean => console.log('promiseThen\'s value:', boolean));

  const promisePending = new Promise(resolve => true);
  // 프로미스의 상태가 항상 pending인 경우에는 then이 실행되지 않음
  promisePending.then(boolean => console.log('promisePending\'s value:', boolean));

  // then은 resolve가 호출된 이후에 발생함
  const promiseSetTimeout = new Promise(resolve => setTimeout(resolve, 3000));
  promiseSetTimeout.then(() => console.log('promiseSetTimeout end'));

  // async/await 사용시 프로미스 객체 앞에 await를 붙이면 마지막 then까지 실행한 후 resolve를 통해 프로미스 값으로 들어가는 데이터를 프로미스 바깥으로 빼올 수 있음
  const promiseData = await new Promise(resolve => resolve(10000));
  console.log('Async/await Data:', promiseData)

(참고)
MDN - Promise