Javascript, Async / Await

1.기본 사용법

async function fetchData() {
    const result = await new Promise((resolve) => {
        setTimeout(() => {
            resolve("데이터 로딩 완료!");
        }, 2000);
    });
    return result;
}

console.log("start");

fetchData().then((data) => {
    // 비동기 함수 호출
    console.log(data);
});

 

 

• fetchData는 async로 정의된 함수입니다. 이 함수는 자동으로 Promise를 반환합니다.
• 함수 내에서 await를 사용하여 Promise가 해결될 때까지 기다립니다.
• setTimeout을 사용해 2초 후에 "데이터 로딩 완료!"라는 메시지를 반환합니다.

2.권장 사용법

async function fetchUser() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("사용자 정보"), 1000); // 1초 후 사용자 정보 반환
    });
}
async function getData() { // 비동기 함수에서 await를 사용해 여러 개의 비동기 작업을 처리합니다.
    const user = await fetchUser(); // 사용자 정보 기다림
    console.log(user); // 1초 후 "사용자 정보" 출력
}

getData();

 

• fetchData는 async로 정의된 함수입니다. 이 함수는 자동으로 Promise를 반환합니다.
• 함수 내에서 await를 사용하여 Promise가 해결될 때까지 기다립니다.
• setTimeout을 사용해 2초 후에 "데이터 로딩 완료!"라는 메시지를 반환합니다.

 

3.응용, 여러 비동기 호출 처리

async function fetchUser() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("사용자 정보"), 1000); // 1초 후 사용자 정보 반환
    });
}

async function fetchPosts() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("포스트 정보"), 1500); // 1.5초 후 포스트 정보 반환
    });
}

async function getData() { // 비동기 함수에서 await를 사용해 여러 개의 비동기 작업을 처리합니다.
    const user = await fetchUser(); // 사용자 정보 기다림
    const posts = await fetchPosts(); // 포스트 정보 기다림
    console.log(user); // 1초 후 "사용자 정보" 출력
    console.log(posts); // 1.5초 후 "포스트 정보" 출력
}

getData();

 

 

• fetchUser와 fetchPosts는 각각 1초, 1.5초 후에 데이터를 반환하는 비동기 함수입니다.
• getData 함수에서 await을 사용하여 두 비동기 함수의 결과를 기다립니다.
• await을 순차적으로 사용하면, 첫 번째 함수가 완료된 후 두 번째 함수가 시작됩니다.

4.Promise.all을 사용한 병렬 비동기 호출

async function getDataParallel() {
    // 여러 비동기 작업을 병렬로 실행
    const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);

    console.log(user); // 1초 후 "사용자 정보" 출력
    console.log(posts); // 1.5초 후 "포스트 정보" 출력
}

getDataParallel();

 

Promise.all을 사용하여 여러 비동기 작업을 병렬로 실행할 수 있습니다.

Promise.all은 모든 비동기 작업이 완료될 때까지 기다리고, 그 후 모든 결과를 배열로 반환합니다.

이 방법을 사용하면 여러 작업을 동시에 진행시킬 수 있어 성능이 개선됩니다.