#TIL 18일차(Promise & async/await)

앙꼬·2024년 5월 15일

부트캠프

목록 보기

18/59

Promise란?

Promise는 비동기 작업을 처리하기 위한 객체로, 주로 비동기 작업의 결과를 처리하기 위해 사용

Promise의 3가지 상태

대기(pending): 이행하지도, 거부되지도 않은 초기 상태
이행(fulfilled): 작업이 성공적으로 완료된 상태
거부(rejected): 작업이 실패한 상태

예시 코드

let promise = new Promise((resolve, reject) => {
    // 비동기 작업 수행
    setTimeout(() => {
        resolve("작업 성공!");
        // reject("작업 실패!"); // 실패 시
    }, 1000);
});

promise
    .then(result => {
        console.log(result); // "작업 성공!" 출력
    })
    .catch(error => {
        console.error(error); // "작업 실패!" 출력
    });

async/await란?

async/await는 Promise를 사용한 비동기 작업을 더 간결하고 가독성 좋게 작성할 수 있게 해주는 ES8 문법

⭐️ async 키워드는 함수가 Promise를 반환한다는 것을 명시하며, await 키워드는 Promise가 이행될 때까지 함수의 실행을 일시 정지시킨다.

사용 방법

async 키워드를 함수 앞에 붙여서 그 함수가 비동기 함수를 반환하도록 한다.
await 키워드는 Promise가 완료될 때까지 기다린다.

예시 코드

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('에러 발생:', error);
    }
}

fetchData();

Promise와 async/await 비교

가독성: async/await는 Promise 체인보다 코드가 더 간결하고 읽기 쉽다.
에러 처리: Promise는 .catch 블록을 사용하여 에러를 처리하지만, async/await는 try/catch 블록을 사용하여 더 직관적으로 에러를 처리할 수 있다.

Promise를 async/await로 변환

Promise를 이용한 코드

function getData() {
    return fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error('에러 발생:', error);
        });
}

getData();

async/await로 변환한 코드

async function getData() {
   try {
       let response = await fetch('https://api.example.com/data');
       let data = await response.json();
       console.log(data);
   } catch (error) {
       console.error('에러 발생:', error);
   }
}

getData();