본문 바로가기

자바스크립트/비동기

Promise 이해하기

function getData(data) {

    return new Promise((resolve, reject) => { // 새로 생성된 Promise는 pending(대기) 상태가 된다.

        // ..

        resolve(data); // 여러 작업이 이뤄진 후 resolve나 reject를 만나면 각각 fulfilled(성공)이나 rejected(실패) 상태가 된다.

    });

}

 

getData(1) // resolve나 reject로 settled 상태가 되면 then으로 넘어간다.

    // data로 resolve된 데이터를 받을 수 있다. 

    .then(data => { // then에서 새로운 Promise를 자동을 생성하게 되고 return 값이 곧 위의 resolve와 같다.

        return data;

    }) // then 역시도 Promise를 리턴한다.

    .then(data => {
        return new Promise((resolve, reject) => { // reject를 쓰려면 새로운 Promise를 수동으로 생성한다.
            if(data > 0) {

                resolve(data);

            } else {

                reject();

            }

        });
    })

    .catch(error => { // 위의 과정 중에서 reject 되거나 에러가 생겼을 때 catch로 바로 넘어 온다.

        console.log(error);

    });

 

참고 :

자바스크립트 Promise 쉽게 이해하기

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

What is a Promise?

https://velog.io/@cadenzah/What-is-a-Promise