[Day10] JS 비동기 - promise, async, await (240705)

Promise

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다:

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

const promise = new Promise((resolve, reject) => {
    // 비동기 작업 수행
    let success = true; // 작업 성공 여부 (예시)
    if (success) {
        resolve('작업 성공');
    } else {
        reject('작업 실패');
    }
});

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

 

Async

async 함수는 항상 Promise를 반환합니다. 이 함수 내에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다.

Await

await 키워드는 Promise가 해결될 때까지 기다립니다. await는 async 함수 안에서만 사용할 수 있습니다.

async function getData() {
    try {
        const response1 = await fetch('https://api.example.com/data1');
        const data1 = await response1.json();
        console.log('첫 번째 데이터:', data1);

        const response2 = await fetch('https://api.example.com/data2');
        const data2 = await response2.json();
        console.log('두 번째 데이터:', data2);

        return { data1, data2 };
    } catch (error) {
        console.error('데이터 가져오기 실패:', error);
    }
}

getData().then(result => {
    if (result) {
        console.log('모든 데이터 가져오기 성공:', result);
    }
});

getData() -> async, await를 사용하여 fetch 요청의 완료를 기다린 뒤, 각 요청이 완료되면 다음 요청이 시작.

오류가 발생하면 catch 블록에서 처리됩니다.(try-catch구문)