Articles
TypeScript 소개
TypeScript의 Async/await

TypeScript의 Async/await

이 글은 TypeScript에서의 async/await에 대해 설명합니다.

YouTube Video

TypeScript의 Async/await

async는 TypeScript에서 비동기 작업을 간결하게 표현하기 위한 키워드이며 JavaScript의 async/await 구문과 유사하게 동작합니다. async 함수는 Promise를 반환하는 함수를 더 직관적으로 처리할 수 있도록 설계되었습니다.

async 함수의 기본

async 키워드로 선언된 함수는 항상 Promise를 반환합니다. 다음은 기본 예제입니다:.

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

이 예제에서 async 함수는 항상 Promise를 반환하므로 반환된 값은 자동으로 Promise.resolve를 사용해 resolve됩니다. 다시 말해, "Data received"는 Promise<string>이 되어 비동기 작업으로 처리됩니다.

await 키워드

await 키워드는 오직 async 함수 내부에서만 사용할 수 있습니다. 이 키워드는 기능 실행을 일시적으로 멈추고 Promise의 결과를 기다릴 수 있는 기능을 제공합니다.

다음 예제는 fetch를 사용한 비동기 처리를 async/await로 작성한 것입니다.

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

이 예제에서 fetch 함수가 반환하는 Promise의 완료를 기다리기 위해 await가 사용되었고 그 결과가 변수 response에 할당됩니다. 또한, response.json()의 결과도 기다립니다.

async/await로 오류 처리하기

비동기 처리 중 발생하는 오류는 표준 try...catch 구문을 사용해 잡을 수 있습니다. await 부분에서 오류가 발생하면 그 오류는 catch 블록에서 처리됩니다.

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

위 예제에서는 fetch 함수의 결과를 await로 대기하고, 오류가 발생하면 try...catch로 처리됩니다.

async/await의 장점

  1. 직관적인 비동기 처리: async/await를 사용하면 코드 흐름이 Promise 체인(then 또는 catch)을 사용할 때보다 더 직관적이며 동기 처리처럼 작성할 수 있습니다.

  2. 간편한 오류 처리: try...catch를 사용하면 비동기 작업에서 오류 처리가 간단해집니다. Promise 체인을 사용하는 것보다 더 가독성 높은 코드를 작성할 수 있습니다.

async 함수의 반환 값

async 함수는 항상 Promise를 반환합니다. 따라서, Promise를 명시적으로 반환하지 않아도 async 키워드를 사용하여 비동기 처리가 가능합니다.

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

위 코드에서 동기 값 42가 반환되지만, async 함수 내부이므로 자동으로 Promise.resolve(42)로 변환됩니다.

비동기 함수의 순차 실행

여러 비동기 함수를 연속적으로 실행할 때 await를 사용하여 실행 순서를 제어할 수 있습니다.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

이 예제에서는 fetchData1이 완료될 때까지 대기한 후 fetchData2가 실행됩니다. 이것은 Promise 체인을 사용하는 것보다 가독성이 좋습니다.

병렬 실행

비동기 작업을 병렬로 실행하려면 Promise.all을 사용하여 여러 Promise를 동시에 처리할 수 있습니다.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

이 경우, fetchData1과 fetchData2가 동시에 실행되며, 둘 다 완료된 후 프로세스가 진행됩니다. 이를 통해 여러 비동기 작업을 효율적으로 처리할 수 있습니다.

요약

  • async 함수는 Promise를 반환하며, await 키워드를 사용하여 비동기 작업의 결과를 대기할 수 있습니다.
  • try...catch를 사용하면 비동기 작업의 에러 처리가 간단해집니다.
  • Promise.all을 사용하면 여러 비동기 작업을 병렬로 실행할 수 있습니다.

async/await는 비동기 작업을 더 간단하게 설명할 수 있기 때문에 TypeScript와 JavaScript에서 널리 사용됩니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

TypeScript의 Promise 클래스