FrontEnd/Javascript

프로미스(promise)

NandaNanda 2024. 2. 7. 23:23

https://www.youtube.com/watch?v=3Ao3OroqQLQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=16

resolve=성공했을 때 실행되는 함수, reject=실패했을때 실행되는 함수. 이와 같이 어떠한 일이 완료된 후 실행되는 함수를 callback(콜백)함수라고함

콜백함수란(callback)? 어떤 일이 완료된 후 실행되는 함수(=어떤 행위에 뒤이어 연이어 실행되는 함수). 즉, resolve는 성공한 후 실행되는 함수이므로 콜백함수이고 reject역시 실패한 후에 실행되는 함수이므로 콜벡함수이다.

 

new Promise생성자가 반환하는 Promise객체는 state, result를 property로 갖는다. 성공하면 state는 fulfilled가 되고 result는 resolve함수가 호출되면서 전달된 value를 값으로 가지게 된다.
3초가 지난후 Promise객체의 state는 fulfilled, result는 'OK'가 됨.
3초가 지난후 Promise객체의 state는 rejected로 result는 error가됨

 

여태까지한 코드(위의 것들)는 판매자의 코드임.

===========================================================================================

지금부터는 소비자의 코드.

pr에는 Promise객체가 담겨 있으므로 result값을 알수 있음. then함수의 첫번째 인자로는 성공했을때 실행되는 함수가 오고 그 인자로는 Promise객체의 property인 result가 오게됨. 반대로 두번째 인자에는 실패했을때 실행되는 함수가 도게 되고 그 함수의 인자로는 error가 전달됨. then함수를 실제로 작성하면 아래와 같은 모습임
이 예에서는 setTimeout함수안의 함수로 resolve가 왔으므로 pr.then의 두번째 인자인 function(err){}가 실행될 수없고 function(result)만이 실행되게 만들어 놓음. 이렇게 기본적으로 then함수는 2개의 인자를 받지만 다음과 같이 catch문을 사용하면 오직 하나의 인자만 받도록 구성할 수도 있음. 이 함수와 아래의 함수는 동일하게 동작함.
이렇게 함수를 구성하면 혹시나 function(result){}함수를 실행하면서 발생하는 에러도 한번에 잡을 수 있게 되는 효과가 있음. 또한 우측과 같이 작성하는 것이 가독성이 더 좋음.

 

알고 있듣이 finally는 실패하던 성공하던 무조건 실행됨.

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


    setTimeout(() => {

        //바로 이 자리에 실패할 수도 있고 성공할수도 있는 내용이 오게됨. 만약 성공하면 조건문이용해서 그 자리에 resolve함수호출하는 것이고
        //실패하면 그 분기문 자리에 reject함수 놓으면 됨.

        // const arr="This will be transported";
        // resolve(arr);
 
        // // reject(new Error("error발생!!!"))
    }, 1500);
});

console.log("Start!!")
pt.then(result=>{//resolve함수를 호출하면서 전달된 인자인arr이 result로 전달되는 것!즉, 위에서와 같이 resolve는 항상 인자와 함께 호출되어야 함.
    console.log(result);
}).catch((err)=>{
    console.log(err);
}).finally(
    function(){
        console.log("끝~~");
    }
);
 
 
 

위의 pt.then이하는 아래와 같이 바꿀수 있음.

 
const pm=new Promise((resolve, failed)=>{
    setTimeout(() => {
        let str1="빵이 성공적으로 만들어 졌어요";
        let str2="빵을 만드는 데 실패했어요";
        let prepared=1;
        if(prepared){
            resolve(str1);
        }else{
            resolve(str2);
        }
    }, 3000);
});

pm.then((result)=>{
    console.log(result);
    console.log("네~찾으러 갈께요")
}).catch((err)=>{
    console.log("네, 다시 시도해 주세요");
}).finally(
    console.log("집으로는 무조건 Go back")
)