관리 메뉴

FU11M00N

[ JavaScript ] JS Promise 본문

Programming/Javascript

[ JavaScript ] JS Promise

호IT 2021. 3. 6. 18:04

 


 

- JS 프로미스

 

프로미스는 비동기 작업을 조금 더 편하게 하기위해 나온 ES6의 새로운 기능입니다.

이전엔 비동기 작업을 처리할 때에 콜백 함수로 처리를했었습니다.

 

콜백지옥..

하지만 콜백 함수로 하게되면 비동기 작업이 많아질수록 코드가 난잡해져 일명 "콜백 지옥"이 나오게 되었습니다.

콜백지옥을 방지하기위해 프로미스를 사용합니다.

 

내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체

Then을 붙이면 결괏값을 반환합니다.

만약 실행이 완료되지 않았으면 완료된 후에 Then 내부 함수가 실행됩니다.

 

- Promise 만들기

Promise 는 다음과 같이 만듭니다.

const myPromise = new Promise((resolve, reject) => { 

//블라블라
//블라블라
//블라블라
//블라블라
//블라블라


});

하지만 비동기 작업은 성공 할 수도있고 실패 할 수도 있기때문에

성공할때에는 resolve를 호출하면되고,

실패를 할 떄에는 reject를 호출하면 됩니다.

const conditon = true;
const promise = new Promise((resolve,reject) => {
    if (conditon){
        resolve("성공");
    }
    else{
        reject("실패");
    }
});

promise
    .then((message)=> {
        console.log(message)
    })
    .catch((error) => {
        console.error(error);
    })
    .finally(() => {
        console.log("무조건");
    });

 

 

성공 리턴값인 Resolve는 then을 통하여 작업을 설정할수있고

실패 리턴값인 Reject는 catch을 통하여 작업을 설정할 수 있습니다.

 

Resolve(성공리턴값) -> then으로 연결

Reject(실패리턴값) -> catch로 연결

Finally 부분은 무조건 실행됨

 

 

promise
.then((message) => {
    return new Promise((resolve,reject)=> {
        resolve(message);
    });
})
.then((message2) => {
    console.log(message2);
    return new Promise((resolve,reject)=> {
        resolve(message);
    });
})

.then((message3) =>{
    console.log(message3);
})
.catch((error) => {
    console.error(error);
});

 

 promise를 사용하면 위와같이 콜백지옥을 더이상 안봐도 됩니다.

프로미스의 then은 연달아 사용이 가능합니다. 이것을 프로미스 체이닝이라고 칭하기도합니다.

 

then 안에 return 한 값이 다음 then으로 넘어가고

그 return값이 프로미스이면 resolve로 넘어가고

에러가 난다면 catch로 이동합니다.

 

 

하지만 then을 계속사용하게된다면 이것또한 "then 지옥" 이라고도 합니다.

 

그러하여 async와 await를 사용합니다. 그것은 다음글에서 정리해보겠습니다.

 

 

 

 

 

 

ref Node.js 교과서: 기본기에 충실한 Node.js 10 입문서

'Programming > Javascript' 카테고리의 다른 글

동기 비동기  (2) 2022.12.14
[ JavaScript ] JS async와 await  (0) 2021.03.06
[ Node.js ] Node의 특징  (0) 2021.03.04
[ Node.js ] Node란  (0) 2021.03.04
[ ES6 Script ] JS 기본 매개변수  (0) 2021.02.16
Comments