async & await

JavaScript의 비동기 프로그래밍을 간편하게 만드는 키워드입니다.

•

Promise 

•

async

•

await

async

async: "비동기" 또는 "비동기식"이라는 의미로 해석됩니다. 영어 단어 asynchronous의 줄임말로, 동시에 일어나지 않는 것을 의미합니다.

await

await: "기다리다" 또는 "대기하다"라는 의미로 해석됩니다. 영어 동사 await에서 유래한 것으로, 어떤 일이 완료되기를 기다리는 것을 의미합니다.

async

함수 선언 앞에 붙이는 키워드로, 함수를 비동기 함수로 정의합니다.

async 함수 내부에서 반환된 값은 자동으로 Promise.resolve()로 감싸집니다. 따라서 async 로 함수를 정의하면, Promise 로 처리할 수 있습니다.

async 사용법

Promise 사용

await 사용

Promise 사용

async function example() {
    return "Hello, async!";
}
example().then(console.log); // "Hello, async!"
JavaScript
복사

await 사용

async function fetchData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    return data;
}
JavaScript
복사

await

함수 호출 앞에 붙이는 키워드로, 비동기 함수의 반환 결과를 기다려서 받아옵니다.

•

async 함수 내부에서만 사용할 수 있으며, Promise가 해결될 때까지 기다립니다. 

◦

 : await 키워드는 Promise가 해결되면 그 값을 반환

◦

 :  Promise가 거부되면 에러 발생

await 예시코드

async function getUserData(userId) {
    try {
        const response = await fetch(`/user/${userId}`);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
    }
}

async function displayUserData(userId) {
    const userData = await getUserData(userId);
    console.log(userData);
}

displayUserData(1);
JavaScript
복사

async & await 장점

•

가독성: async/await를 사용하면 비동기 코드를 마치 동기 코드처럼 작성할 수 있어 가독성이 높아집니다.

•

에러 처리: try...catch 블록을 사용하여 비동기 코드에서도 동기 코드와 동일한 방식으로 에러를 처리할 수 있습니다.

•

디버깅: async/await를 사용하면 콜백 지옥(callback hell)을 피할 수 있어 디버깅이 용이합니다.