[Javascript]비동기 처리 Promise, async/await 살펴보기

javascript에서 비동기 처리를 다루는 방법으로는 Promise와 async/await이 있습니다. 이 두 가지 방법은 비동기 작업(예: API 호출, 파일 읽기 등)을 처리하는 데 매우 유용합니다.

1. Promise 예제

Promise는 비동기 작업이 성공했는지 실패했는지에 따라 결과를 처리할 수 있는 객체입니다.

// 비동기 작업을 시뮬레이션하는 Promise 생성
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;  // 작업이 성공했다고 가정
            if (success) {
                resolve("데이터를 성공적으로 가져왔습니다.");
            } else {
                reject("데이터를 가져오는 데 실패했습니다.");
            }
        }, 2000);  // 2초 후에 작업이 완료됨
    });
};

// Promise 사용 예제
fetchData()
    .then(result => {
        console.log(result);  // 작업이 성공하면 이 블록이 실행됨
    })
    .catch(error => {
        console.error(error);  // 작업이 실패하면 이 블록이 실행됨
    });

 

위의 예제에서 fetchData 함수는 Promise를 반환합니다. 2초 후에 성공 또는 실패에 따라 resolve 또는 reject가 호출됩니다. then과 catch를 사용하여 결과를 처리할 수 있습니다.

2. async/await 예제

async/await은 Promise를 다루는 더 간결하고 직관적인 방법입니다. await 키워드는 Promise가 해결될 때까지 기다리고, async 키워드는 함수가 비동기임을 명시합니다.

// 비동기 작업을 시뮬레이션하는 함수 (Promise를 반환)
const fetchDataAsync = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;  // 작업이 성공했다고 가정
            if (success) {
                resolve("데이터를 성공적으로 가져왔습니다.");
            } else {
                reject("데이터를 가져오는 데 실패했습니다.");
            }
        }, 2000);  // 2초 후에 작업이 완료됨
    });
};

// async/await 사용 예제
const getData = async () => {
    try {
        const result = await fetchDataAsync();
        console.log(result);  // 작업이 성공하면 이 블록이 실행됨
    } catch (error) {
        console.error(error);  // 작업이 실패하면 이 블록이 실행됨
    }
};

// 비동기 함수 호출
getData();

 

위의 예제에서 getData 함수는 async 키워드를 사용하여 비동기 함수로 정의되었습니다. await 키워드는 fetchDataAsync가 반환하는 Promise가 해결될 때까지 기다리고, 그 결과를 result 변수에 할당합니다. 에러가 발생할 경우 try/catch 블록에서 처리합니다.

요약

• Promise: 비동기 작업의 완료 또는 실패를 처리하기 위한 객체입니다. then, catch 메서드를 사용하여 결과를 처리합니다.
• async/await: 비동기 코드를 더 간결하게 작성할 수 있게 해주는 구문입니다. await를 사용하여 Promise가 해결될 때까지 기다립니다.

이 두 가지 방법은 비동기 작업을 다룰 때 유용하며, 특히 async/await은 비동기 코드를 더 읽기 쉽게 만듭니다.