[자바스크립트 비동기 문법] Promise(프로미스)란?

안녕하세요~  오늘은 Promise에 대해 알아보고 Promise 객체에 대한 상태와 Promise 를 사용한 코드를 살펴보겠습니다.

목차
1.  Promise(프로미스)
1-1. Promise(프로미스) 란? 
1-2. Promise(프로미스) 를 왜 사용할까?
1-3. Promise(프로미스) 객체 상태 3가지
1-4. Promise Chaininig (프로미스 체이닝) 이란?
1-5. Promise Chaininig (프로미스 체이닝) 사용 코드
1-6. Promise 사용한 코드 

 

서론

먼저 Promise를 알기 전에 비동기 처리에 대한 학습이 필요합니다.  비동기 처리에 대한 이해가 충분히 되었다면 Promise에 대한 내용을 학습할 준비가 되어 있습니다.  

본론

1.  Promise(프로미스)

 

1-1. Promise(프로미스) 란? 

Promise는 비동기 작업의 결과를 처리하는 데 사용되는 객체를 뜻합니다. 

 

 

 

1-2. Promise를 왜 사용할까? 

Promise가 필요한 이유는 서버에서 받아온 데이터를 화면에 표시할 때 사용할 수 있습니다. 즉, API 같은 사용자와 상호작용하는 부분들을 Promise로 사용하여 서버에서 데이터를 요청하고 받아오기 위해서 사용되기 때문입니다.

 

1-3. Promise(프로미스) 객체 상태 3가지

1. pending : 대기 상태 promise 객체를 생성하면 초기 상태다.
2. fullfilled : 비동기 작업이 정상적으로 완료 되었을때 성공의 상태다.
3. Rejected : 비동기 작업이 정상적이지 않아서 실패의 상태

 

1-4. Promise Chaininig (프로미스 체이닝) 이란?

Promise 체이닝은 Promise의 then() 메서드를 연속적으로 연결하여 비동기 작업들을 순차적으로 처리하는 것을 의미합니다.

 

1-5. Promise Chaininig (프로미스 체이닝) 사용 코드

// Promise 생성자 함수에 전달하는   콜백 함수의 매개변수로 첫번째, 두번째
// 첫번째 매개변수는 성공일때 호출할 콜백함수를 호출할 때 전달하는 매개변수의 값이 성공의 결과 값이다.
// 두번째 매개변수는 실패일때 호출할 콜백함수를 호출할 때 전달하는 매개변수의 값이 실패의 결과의 값이다.
const a = 1;
let res = new Promise((res, rej) => {
    if(a === 1) {
        res("성공했을때 반환되는 데이터")
    } else {
        rej("실패했을때 반환되는 데이터")
    }
});

// then catch가 호출되는 시기는 대기(pending) 상태가 끝낫을 때
// 대기상태가 끝나고 성공의 결과가 호출되었을때
res.then((result) => {
    // result === "성공했을 때 반환되는 데이터"
    // 성공한 데이터를 가지고 작업을 진행하는 코드
    // 게시판의 내용을 만들어주면 된다.
}).catch((error) => {

})

// Promise 체이닝
// 비동기 작업을 순서대로 실행하고 싶을 때
res.then((result) => {
    return result
}).then((result) => {
    console.log(result);
}).catch((error) =>{

})

 

 

1-5. Promise 사용한 코드 

class Promise {
    state = "padding"
    Fullfilled = function (resValue) { this.state = "Fullfilled", this.resValue = resValue }
    Rejected = function (rejValue) { this.state = "Rejected", this.rejValue = rejValue }

    constructor(cb) {
        this.cb = cb;  // (res, rej) => {res("성공")}
        init();
    }

    init() {
        // try catch  백엔드 로직 
        // 장점 : 오류가 발생해도 프로그램이 종료되지 않는다.
        // try catch 밖에 try catch 또 있고 첫번째 try catch문에서 두 번째 try catch문의 return 한 오류의 내용을 
        try {
            //  try 문에서 에러가 발생하면
            this.cb(this.Fullfilled, this.Rejected)
        } catch(error){
            console.log(error);
        }
        // (res, rej) => {res("성공")}
    }

    then(callback) {

        /*
        callback
            (result) => {
             console.log(result)
            }
        */
        // pandding이 끝나면 
        if(this.state === "Fullfilled") {
            callback(this.resValue);
            return this;
        }
        if(callback === undefined) {
            return this;
        }
        return this;
    }

    catch(callback)  {
        // pannding이 끝나면
        /*
        callback
            (error) => {
                 console.log(error)
            }
        */

        if(this.state === "Rejected") {
            callback(this.rejValue);
        }
          if(callback === undefined) {
            return this;
        }
        return this;
    }
}

 

 

결론

Promise는 비동기 프로그래밍을 보다 효율적이고 가독성 높게 작성할 수 있도록 도와주는 강력한 도구입니다. Promise의 then() 메서드와 catch() 메서드를 사용하여 콜백 지옥을 해결하고, 오류 처리를 효율적으로 관리하며, 비동기 작업의 결과를 명확하게 처리할 수 있습니다. 

Promise 부분은 너무 깊게 들어가지 않고 넘어가도록 하겠습니다. 감사합니다!!