[자바스크립트] 비동기 프로그래밍, Callback, Promise, async/await

자바스크립트 비동기 프로그래밍에는 세가지 방법이 있다.

콜백(Callback) 함수, Promise(프로미스), async/await

# 콜백(Callback) 함수는 다른 함수의 인자로 전달되어 나중에 실행되는 함수이다. 주로 비동기적인 작업에서 사용된다.

1. setTumeout() 함수

console.log("시작");

// 3초 후에 콜백 함수가 실행됩니다.
setTimeout(function() {
    console.log("3초가 지났습니다.");
}, 3000);

console.log("끝");

2. 이벤트 핸들러

 

<button id="myButton">클릭하세요</button>

<script>
    // 버튼 클릭 시 실행되는 콜백 함수
    
    document.getElementById("myButton").addEventListener("click", function() {
        console.log("버튼이 클릭되었습니다.");
    });
    
</script>

 

# Promise(프로미스)는 비동기 작업의 성공 또는 실패를 나타내는 객체이다. Promise 객체는 성공 시 resolve 콜백함수를, 실패 시 reject 콜백 함수를 가진다.
then 과 catch 메소드를 사용해서 resolve 또는 reject 상태에 따라 처리할 수 있다.

// Promise 객체를 생성하는 함수
function myAsyncFunction() {
    return new Promise(function(resolve, reject) {
        // 비동기 작업을 수행
        setTimeout(function() {
            const randomNumber = Math.random();
            // 임의로 성공 또는 실패 결정
            if (randomNumber < 0.5) {
                // 작업이 성공한 경우
                resolve("작업이 성공적으로 완료되었습니다.");
            } else {
                // 작업이 실패한 경우
                reject("작업을 완료하는 동안 오류가 발생했습니다.");
            }
        }, 1000);
    });
}

// Promise를 사용하여 비동기 작업을 수행하고 결과에 대응
myAsyncFunction()
    .then(function(result) {
        // 작업이 성공적으로 완료된 경우
        console.log("성공:", result);
    })
    .catch(function(error) {
        // 작업이 실패한 경우
        console.error("실패:", error);
    });

=> resolve, reject가 왜 필요한지 궁금해지기 마련.

Promise는 세 가지 상태를 가진다:

대기(pending): 비동기 작업이 아직 완료되지 않은 상태.
이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태.
거부(rejected): 비동기 작업이 실패한 상태.

Promise 객체를 생성할 때, 생성자 함수 내부에서는 비동기 작업을 시작하고, 그 결과에 따라 Promise의 상태를 변경하는 resolve와 reject 함수를 호출한다.

 

// Promise를 생성하는 함수
function myAsyncFunction() {
    return new Promise(function(resolve, reject) {
        // 비동기 작업을 시작합니다. (예: 서버에서 데이터 가져오기)
        setTimeout(function() {
            const success = Math.random() < 0.5; // 50% 확률로 성공 또는 실패
            if (success) {
                // 작업이 성공한 경우 resolve 함수를 호출하여 Promise를 이행 상태로 변경합니다.
                resolve("작업이 성공했습니다.");
            } else {
                // 작업이 실패한 경우 reject 함수를 호출하여 Promise를 거부 상태로 변경합니다.
                reject("작업이 실패했습니다.");
            }
        }, 1000); // 1초 후에 작업을 완료합니다.
    });
}

// Promise를 사용하여 비동기 작업을 수행하고 결과에 따라 처리합니다.
myAsyncFunction()
    .then(function(result) {
        // 작업이 성공한 경우
        console.log("성공:", result); // "작업이 성공했습니다."를 출력합니다.
    })
    .catch(function(error) {
        // 작업이 실패한 경우
        console.error("실패:", error); // "작업이 실패했습니다."를 출력합니다.
    });

위의 코드에서 myAsyncFunction은 비동기 작업을 시작하는 함수이다. setTimeout을 사용하여 1초 후에 작업이 완료되도록 설정했다. 그 후에는 Math.random()을 사용하여 50%의 확률로 작업이 성공 또는 실패하도록 설정했다.

성공할 경우 resolve 함수를 호출하여 Promise를 이행 상태로 '변경'하고,
실패할 경우 reject 함수를 호출하여 Promise를 거부 상태로 '변경'한다. => resolve, reject가 결과를 이행, 거부 상태로 변경할 수 있다는 것이 핵심.

이후 .then() 메서드를 사용하여 작업의 성공 결과를 처리하고, .catch() 메서드를 사용하여 작업의 실패 결과를 처리한다.

이렇게 resolve와 reject 함수를 사용하여 Promise의 상태를 변경하면, 해당 Promise 객체가 이행되거나 거부되었을 때 .then() 또는 .catch() 메서드를 통해 적절한 처리를 할 수 있다.


# async/await은 비동기 함수 앞에 async 키워드를 사용하여 정의하고, 해당 함수 내에서 await 키워드를 사용하여 Promise를 기다릴 수 있다.
결과물로 Promise를 내보낸다.

async function myAsyncFunction() {
    try {
        const result = await someAsyncOperation();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}