Promise 란??

콜백함수를 사용하다 보면 원하지 않게 콜백지옥을 경험 할 때가 있습니다. 로직을 따라 콜백함수를 계속 작성하다 보면 가독성이 심하게 떨어지는 코드를 작성하게 됩니다. 이럴때 사용하는 것이 Promise 객체 입니다. Promise는 요청에 대해 응답이 준비되었을 때 알림을 주는 알람 서비스 같은 역할 입니다.

// 보통 콜백함수

function work(sec, callback) {
    setTimeout(() => {
        callback(new Date().toISOString());
    }, sec * 1000);
}

work(1, (result) => {
    console.log("첫 번째 작업 : ", result);
    work(1, (result) => {
        console.log("두 번째 작업 : ", result);
        work(1, (result) => {
            console.log("세 번째 작업 : ", result);
        });
    });
});

위에 있는 코드처럼 동기적 처리를 하기 위해서 콜백함수를 사용하다 보면 콜백지옥으로 들어 갈수 있습니다. 하지만 Promise를 사용하면 보다 쉽게 동기적 처리를 할 수 있습니다.

// Promise 사용

function workP(sec) {
  	// Promise의 인스턴스를 반환
  	// then에서 반환한 것을 받는다.
    return new Promise(((resolve, reject) => {
      	// Promise 생성시 넘기는 callback = resolve, reject
      	// resolve 동작 완료시 호출, 오류 났을 경우 reject
        setTimeout(() => {
            resolve(new Date().toISOString());
        }, sec * 1000);
    }))
}

workP(1).then((result) => {
    console.log("첫 번째 작업 : ", result);
    return workP(1);
}).then((result) => {
    console.log("두 번째 작업 : ", result);
    return workP(1);
}).then((result) => {
    console.log("세 번째 작업 : ", result);
    return workP(1);
})

위 코드처럼 Promise 객체를 이용해서 바로 콜백함수를 사용하지 않고 then을 이용하면 순차적으로 코드를 작성 할 수 있기 때문에 가독성이 조금더 좋은 코드를 작성할 수 있습니다.

예외 처리

function wait(sec) {
    return new Promise(((resolve, reject) => {
        setTimeout(() => {
          // 예외발생
            reject('error..!');
        }, sec * 1000);
    }));
}

// 예외처리
wait(3).catch(e => {
    console.log('1st catch ', e);
});

// then을 사용할 시 예외처리
wait(3).then(() => {
	console.log("Success");
}, e => {
	console.log("Catch in Then ", e);
});

읽어보면 좋은 곳

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