본문 바로가기

카테고리 없음

javascript Promise란?

Promise 란?

자바스크립트에선는 비동기 처리를 위해 사용되는 라이브러리? 이다.
자바스크립트의 콜백을 통해 비동기 처리를 할 수 있지만 비동기 처리를 순차적으로 처리해야할 경우 에러 및 예외처리가 어렵고 콜백 중첩으로 인한 코드의 복잡도가 증가 하는 단점을 해결하기위해 ES6에서는 언어적 차원으로 지원하게 되었다.

Promise의 생성 방법

const PROMISE_TEST = function(str){
    return new Promise(function(resolve, reject){
        if(str){
            resolve(str);
        }else{
            reject(str) //undefined
        }
    });
}

PROMISE_TEST('변진환').then(function(result){
    console.log(result);
}, function(err){
      console.log(!err);
});

PROMISE_TEST('').then(function(result){
    console.log(result);
}, function(err){
      console.log(!err);
});
//변진환
//true

Promise의 3가지 상태

Promise는 생성하고 종료될 때까지 3가지 상태를 갖는다.

Pending(대기) :비동기 처리 로직이 완료되지 않은상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

[프로미스 처리흐름]

Alt text

Promise의 실무 사용 방법

const PROMISE_TEST = function(str){
    return new Promise(function(resolve, reject){
        if(str){
              console.log(str)
            resolve(str);
        }else{
            console.log(str)
            reject(str) //undefined
        }
    });
}
PROMISE_TEST('변진환')
.then(()=>{PROMISE_TEST('변지온')})
.then(()=>{PROMISE_TEST('신승미')})
.catch(()=>{PROMISE_TEST('에러')})
.then(()=>PROMISE_TEST(''))
.catch(()=>PROMISE_TEST('에러'))
//변진환
//변지온
//신승미
//
에러

마치며...

실무에서 코드의 복잡도를 낮추고 예외처리도 쉽게 할 수 있어 유용해 보인다.

참고사이트

https://jeong-pro.tistory.com/128
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise