[자바스크립트] Promise

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다.

1. 프로미스 기본 예제

• 프로미스로 간단하게 카운트 5을 세는 countdown함수를 만들어 봅시다.

function countdown(seconds){
    return new Promise(function(resolve,reject){
        for(let i=seconds;i>=0;i--){
            setTimeout(function(){
                if(i>0) console.log(i + '...');
                else resolve(console.log("GO!"));
            },(seconds-i)*1000);
        }
    })
}

const p =countdown(5);
p.then(
    function(){
        console.log("countdown completed successfully");
    }
);
p.catch(
    function(err){
        console.log("countdown experienced an error: "+err.message);
    }
);
/*
5...
4...
3...
2...
1...
GO!
countdown completed successfully
*/

• 여기서 카운트 다운을 할 때 불길한 숫자 4가 나오면 에러를 내도록 해봅시다.

function countdown(seconds){
    return new Promise(function(resolve,reject){
        for(let i=seconds;i>=0;i--){
            setTimeout(function(){
                if(i===4) return reject(new Error("Oh my god"));
                if(i>0) console.log(i + '...');
                else resolve(console.log("GO!"));
            },(seconds-i)*1000);
        }
    })
}

const p =countdown(5);
p.then(
    function(){
        console.log("countdown completed successfully");
    }
);
p.catch(
    function(err){
        console.log("countdown experienced an error: "+err.message);
    }
);
/*
5...
countdown experienced an error: Oh my god ....
3...
2...
1...
GO!
*/

• 보신것과 같이 숫자 4에서 에러가 발생하지만 카운트 다운은 멈추지 않습니다.이들은 그저 프로미스를 관리할 뿐입니다.
  여기서 new Promise(), resolve(), then() 과 같은 함수를 사용했는데 이거에 대해서 더 자세히 알아보도록 하겠습니다.

2. 프로미스의 3가지 상태

• 프로미스처리과정에서는 Pending(대기), Fulfilled(이행), Rejected(실패) 3가지의 상태가 존재합니다.

1. Pending(대기)

비동기 처리 로직이 아직 완료되지 않은 상태

new Promise(function (resolve, reject) {
  // ...
});

2. Fulfilled(이행)

비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태(resolve 사용)

function getData() {
  return new Promise(function (resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function (resolvedData) {
  console.log(resolvedData); // 100
});

3. Pending(대기)

비동기 처리가 실패하거나 오류가 발생한 상태(reject 사용)

function getData() {
  return new Promise(function (resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function (err) {
  console.log(err); // Error: Request is failed
});

3. 프로미스 체인

프로미스가 완료되는 시점에 다른프로미스를 반환하는 함수를 즉시 호출 할 수 있습니다.

function launch(){
    return new Promise(function(resolve,reject){
        console.log("Lift off!");
        setTimeout(function(){
            resolve("In orbit!");
        },2*1000);
    });
}

• launch 함수를 만들어서 기존 countdown 프로미스에 연결해봅시다.

const count= new Countdown(5)
    .on('tick',i=>console.log(i+'...'));

count.go()
    .then(launch)
    .then(function(msg){
        console.log(msg);
    })
    .catch(function(err){
        console.err("Houstion, we have a problem....");
    })

• 프로미스는 다음과 같이 작동을 합니다.

참고 사이트 : 캡틴판교 , MDN-Promise
참고 책 : Learning JavaScript (이서 브라운 지음, 한빛미디어)