[JS] 비동기 작업 처리하기2 - Promise (JS 내장객체)

🔽콜백함수 사용법

https://hyeonddobbi.tistory.com/454

[JS] 비동기 작업 - 콜백함수 사용하여 처리

 

---

 

✅Promise

비동지 작업을 효율적으로 결과를 처리할 수 있도록 도와주는

자바스크립트의 내장 객체

 

Promise의 효능

• 비동기 작업 실행
• 비동기 작업 상태 관리
• 비동기 작업 결과 저장
• 비동기 작업 병력 실행
• 비동기 작업 다시 실행
• 기타 등등.....

형태

Promise 객체 안에서
 ㄴ 비동기 작업(ex. setTimeout) 작성

 

3가지 상태

	대기(Pending)
🔽		🔽
성공(Fulfilled)		실패(Rejected)

//상태 : 대기 , 성공, 실패
const promise = new Promise((resolve, reject) => {
    //비동기 작업 작성
    // 이 공간을 executor(익스큐터) 함수라고 부른다.
    // (이 안에서도 콜백함수를 작성한다.)
    // 두가지 파라미터가 있는데
    // resolve, reject (둘다 콜백함수 매개변수)라고 한다.


    setTimeout(() => {
        console.log("안녕")
        
        resolve("안녕");//성공을 나타냄, 인자값으로 결과를 넘겨준다.
    }, 2000);
});

setTimeout(()=>{
    console.log(promise);//프로미스 객체 실행
    // (promisState가 fullfilled면 성공)
    // promisResult는 결과이다.
}, 3000);

console.log(promise)

 

    setTimeout(() => {

        console.log("안녕")

   

         //executor함수에서 reject를 호출하게 되면 promise에  비동기작업이 실패하는거다.

        reject("실패")

    }, 2000);

 

✅핵심

resolve와 reject 콜백함수를 통해 Promise에 결과값을 전달 할 수 있다.

 

 

예시1

//then 메소드
//뜻 : 그 후에

//대기 , 성공, 실패
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const num = null;

        if(typeof num === "number"){
            resolve(num+3);
        }else{
            reject("num이 숫자가 아닙니다.");
        }
    }, 2000);
});




promise.then((value) => //resolve 콜백함수의 결과값
{
    console.log(value);
}).catch((error) => { //reject 콜백함수의 결과값
    console.log(error);
})

출력 : 13

 

👀예시2

function add10(num){

    //새로운 promise 객체를 생성
    const promise = new Promise((resolve, reject)=>{

        setTimeout(() => {
            
            if(typeof num === "number"){
                resolve(num + 10);
            }else{
                reject("num이 숫자가 아닙니다.")
            }


        }, 2000);
    })


    return promise;
}

const p = add10(0);
p.then((value) => {
    const newP = add10(value);//콜백함수 결과값 인자로 넣고 다시 add10()호출
    
    newP.then((result) => {
        
        console.log(result);//결과
    });

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

 

출력 : 20

 

👀예시2가 계속 반복되면 콜백지옥이 생기게 되는데... 어떻게 처리하나?

function add10(num){

    //새로운 promise 객체를 생성
    const promise = new Promise((resolve, reject)=>{

        setTimeout(() => {
            
            if(typeof num === "number"){
                resolve(num + 10);
            }else{
                reject("num이 숫자가 아닙니다.")
            }


        }, 2000);
    })


    return promise;
}

add10(0)
    .then((value) => {
        //콜백지옥을 벗어나기 위해 새로운 newP객체의 결과값을 then을 통해 처리 가능하다.
        return  add10(value);

    }).then((result) => {
        console.log(result);
        return add10(undefined); //💥중간에서 발생한 오류더라도 아래 catch문에서 처리함.

    }).then((result) => {
        console.log(result);

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

---

💥좀 더 가독성있게 사용할 수 없을까?

다음 시간에는 async/await 키워드에 대해서 알아보자

https://hyeonddobbi.tistory.com/457

[JS] 비동기 작업 처리하기 (async/await)