[typescript] await 키워드의 사용 방법

08 Dec 2023

typescript

TypeScript에서 await 키워드는 비동기 함수 안에서 사용되어 해당 함수의 실행을 일시 중지시키고 Promise 객체가 처리될 때까지 기다립니다. 이 기능을 사용하면 비동기적으로 작업을 수행하는 코드를 보다 간결하게 작성할 수 있습니다.

await 키워드의 기본적인 사용 방법

await 키워드를 사용하기 위해서는 함수가 async로 선언되어야 합니다. 아래는 기본적인 await 키워드의 사용 예시입니다.

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

위의 예제에서 fetchData 함수는 async로 선언되어 있고, await 키워드를 통해 fetch 함수와 response.json() 함수가 Promise를 반환하는지에 대해 처리될 때까지 기다립니다.

await 키워드의 에러 처리

await 키워드를 사용하는 도중에 발생한 에러는 try...catch 블록을 통해 처리할 수 있습니다. 아래는 간단한 예시입니다.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

Promise 체이닝 대신의 await 사용

await 키워드는 Promise 체이닝을 대체하는 데 유용하게 사용될 수 있습니다. 아래는 Promise 체이닝 대신 await 키워드를 사용한 예시입니다.

async function getUserData() {
    const userResponse = await fetch('https://api.example.com/user');
    const userData = await userResponse.json();

    const postsResponse = await fetch('https://api.example.com/user/${userData.id}/posts');
    const postsData = await postsResponse.json();

    return { user: userData, posts: postsData };
}

await 키워드를 사용하면 코드가 보다 명확하고 가독성이 높아지며, 에러 처리도 보다 간편해집니다.

위의 예시를 통해 TypeScript에서 await 키워드의 사용 방법을 살펴보았습니다. 이를 통해 비동기 코드를 보다 간결하고 효율적으로 작성할 수 있습니다.