[JavaScript] 비동기와 async / await

Promise

[JavaScript] 비동기와 Promise

 

 

async / await 키워드

• `async` 키워드 : 함수를 비동기 함수로 만듦
  • `async` 함수는 항상 Promise를 반환
  • 일반 값을 반환해도 자동으로 `Promise.resolve(값)` 로 감싸짐
• `await` 키워드 : Promise 가 완료될 때까지 기다림
  • `await` 키워드는 항상 `async` 함수 내부에서만 사용할 수 있음
  • `await` 에서 에러가 발생하면 `try~catch` 를 사용해 처리

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("데이터 불러오기 실패!"); // 실패 케이스
        }, 2000);
    });
}

async function loadData() {
    try {
        let data = await fetchData();
        console.log(data);
    } catch (error) {
        console.log("에러 발생:", error);
    }
}

loadData();
// 출력:
// (2초 후) 에러 발생: 데이터 불러오기 실패!

> 콜백 지옥이나 `then()` 체이닝 없이 동기 코드처럼 작성 가능

 

async / await 와 API 요청

• 기존 (`Promise.then()` 체이닝) : 여러 개의 `.then()` 체이닝 시 코드가 길어지고 복잡해짐

function fetchData() {
    fetch("https://localhost:8080/member/1")
        .then(response => response.json())
        .then(data => console.log("데이터:", data))
        .catch(error => console.log("오류 발생:", error));
}

fetchData();

• `async / await` 방식 : 동기 코드처럼 작성할 수 있어 직관적이고 가독성 우수

async function fetchDataAsync() {
    try {
        let response = await fetch("https://localhost:8080/member/1");
        let data = await response.json();
        console.log("데이터:", data);
    } catch (error) {
        console.log("오류 발생:", error);
    }
}

fetchDataAsync();

 

async / await 와 Promise.all()

• `Promise.all()` : 모든 Promise가 완료될 때까지 기다림
  • 여러 개의 Promise를 동시에 실행하여 모두 성공하면 결과를 배열로 반환하고 만약 하나라도 실패하면 전체가 실패
• async / await 키워드와 Promise.all() : 여러 개의 비동기 작업을 병렬로 실행하고 싶을 때 사용하면 효율적
  • 여러 API 요청을 동시에 실행하여 총 실행 시간을 단축할 수 있음

async function fetchMultipleData() {
    try {
        let [user, post] = await Promise.all([
            fetch("https://localhost:8080/users/1").then(res => res.json()),
            fetch("https://localhost:8080/posts/1").then(res => res.json())
        ]);

        console.log("사용자 정보:", user);
        console.log("게시글 정보:", post);
    } catch (error) {
        console.log("오류 발생:", error);
    }
}

fetchMultipleData();
// 출력:
// 사용자 정보: {id: 1, name: "Leanne Graham", ...}
// 게시글 정보: {id: 1, title: "sunt aut facere repellat provident occaecati", ...}

 

async / await 와 setTimeout()

• `setTimeout()` : Promise 를 반환하지 않으므로 `async`, `await` 와 함께 사용하려면 Promise 로 감싸야 함

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function execute() {
    console.log("2초 대기...");
    await delay(2000); // 2초 대기
    console.log("실행 완료!");
}

execute();
// 출력:
// 2초 대기...
// (2초 후) 실행 완료!