Promise

 fetch api를 보던 중, Promise에 대한 이해가 부족하다는 것을 알게 되었다. 써볼 일이 없었기 때문에 나에겐 어색한 친구였다. 그래서 이번 글을 통해 막연하게 알고 있던, 하지만 javascript의 중요한 개념 중 하나인 Promise에 대해서 간단하게 정리 및 실습을 해보고자 한다.

 

 

 

 

 

 Promise는 javascript의 표준 내장 객체/ 제어 추상화 객체 중 하나이다. (대표적인 친구로는 제네레이터가 있다.) 아래의 링크를 들어가면 Promise의 정보, 속성, 메소드를 볼 수 있다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise

 

 

 

 

 

 

프로미스는 대기, 이행, 거부의 상태를 가진다. 개발자 도구의 console을 통해서 Promise의 상태 및 값을 확인할 수 있다.

 

대기 상태

 

이행 상태

 

거부 상태

 

 

 

 

 

 

Promise의 간단한 사용법이다. resolve를 호출하면 then이 실행되고, reject를 호출하면 catch가 실행된다. then의 인자로 들어가는 함수 안에서 return을 하면 다음 then의 인자 함수의 인자로 전달이 된다.

let pending = new Promise((resolve, reject) => { // 대기 상태의 Promise
    // resolve('resolve');
    reject('reject')
});

pending
    .then((str) => { // resolve()의 주석을 풀면 이 부분이 실행된디.
        console.log(str);
    })
    .catch((str) => { // reject()로 인해 이 부분이 실행된다.
        console.log(str);
        return 'end';
    })
    .then((str) => { // return 된 end가 출력된다.
        console.log(str);
    });

//출력 결과
//reject
//end

 

 

 

 

 

 

 

 그렇다면 이러한 Promise의 목적은 무엇일까? 바로 비동기적인 함수들간의 순서를 만들어 줄 수 있다는 것이다 바로 예를 들어보겠다.

 

let n = 1;

setTimeout(() => {
    console.log(n);
    n++;
}, 1000);

setTimeout(() => {
    console.log(n);
    n++;
}, 1000);

setTimeout(() => {
    console.log(n)
}, 1000);

// 1초 뒤 1
// 2초 뒤 2
// 3초 뒤 3
// 의 결과를 의도했지만 123이 한번에 출력된다.

 

 

 위의 코드에서 개발자는 1초가 경과할 때마다 1... 2... 3...이 출력되기를 의도했지만 setTimeout함수가 비동기적이기 때문에 원하는 결과를 만들 수 없었다. 그렇다면 Promise를 이용하여 어떻게 해결할 수 있을까?

 

 

let p = new Promise((resolve, reject) => { // 1초 뒤에 1을 출력하고 resolve를 호출함
    setTimeout(() => {
        console.log(1);
        resolve(1);
    }, 1000);
});


// p에 대한 then을 실행하고, resolve가 호출된 때는 1초가 지났으므로 
// 추가적으로 1초 후에 resolve를 호출하는 새로운 Promise를 return 한다.
p.then((n) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(n + 1);
                resolve(n + 1);
            }, 1000);
        })
    })
    // 이번에 호출되는 then은 두번째에서 return 된 Promise에 대한 then이다.
    .then((n) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log(n + 1);
            }, 1000);
        })
    });

// 실행 결과
// 1초 뒤 1
// 2초 뒤 2
// 3초 뒤 3

 

 

물론 setTimeout 안에 새로운 setTimeout을 호출하면 더 짧고 간단한 코드가 될 수 있을 것이다. 하지만 다른 비동기 함수의 경우에도 그런 방법으로 해결할 수 있을지는 의문이다. 이는 콜백 함수간의 중첩으로 인해 의존성이 높아진다. 비동기 함수 콜백 지옥의 시작을 원하는 개발자는 없을 것이다.

 

 

 

 

 결론적으로 Promise를 사용하면 콜백 지옥에서 벗어나는 방법으로 비동기적인 함수들을 동기화시켜 개발자의 의도대로 코드를 작성할 수 있다는 것이 장점이다.

 

 

 

 

 

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise

 

 

 

 

 

wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises

Using promises

 

 

 

 

 

medium.com/@vdongbin/javascript-%EC%9E%91%EB%8F%99%EC%9B%90%EB%A6%AC-single-thread-event-loop-asynchronous-e47e07b24d1c

Javascript 동작원리 (Single thread, Event loop, Asynchronous)

 

 

 

 

yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1%EC%9D%98-%EB%AC%B8%EC%A0%9C%EC%A0%90%EA%B3%BC-%ED%94%84%EB%A1%9C%EB%AF%B8%EC%8A%A4-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0

자바스크립트 콜백의 문제점과 프로미스 쓰는 이유