코딩 스쿨 JavaScript

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ JavaScript Async
JavaScript Callbacks
JavaScript Asynchronous
JavaScript Promises
JavaScript Async-Await

JavaScript Async-Await

JavaScript async/await: 비동기 처리를 위한 간결한 구문

  • *async/await*는 JavaScript에서 비동기 작업을 처리하는 방법으로, 프라미스(Promise) 기반의 비동기 코드를 동기식 코드처럼 쉽게 작성할 수 있게 해줍니다. **async/await*는 비동기 작업의 흐름을 더 직관적으로 관리할 수 있으며, 프라미스 체이닝보다 가독성이 높은 코드를 작성할 수 있습니다.

이 가이드는 JavaScript에서 async/await의 개념과 실용적인 사용법을 설명합니다.

1. async/await 기본 개념

async 함수는 항상 프라미스를 반환하는 비동기 함수입니다. **await**는 프라미스가 완료될 때까지 기다렸다가, 그 결과를 반환하는 키워드입니다. **await**는 **프라미스가 이행(fulfilled)**되거나 **거부(rejected)**될 때까지 대기하고, 완료되면 그 값을 처리합니다.

1.1. async와 await 기본 구문

async function myFunction() {
    const result = await someAsyncTask();
    console.log(result);
}

myFunction();
  • async 키워드는 비동기 함수를 정의하며, 이 함수는 항상 프라미스를 반환합니다.
  • *await*는 프라미스가 완료될 때까지 기다리며, 완료된 값을 반환합니다.
  • *await*는 async 함수 안에서만 사용할 수 있습니다.

2. async/await를 사용한 비동기 처리

  • *async/await*는 프라미스를 사용하는 비동기 작업을 동기식 코드처럼 간단하게 처리할 수 있습니다. 예를 들어, 서버에서 데이터를 가져오는 작업이나 파일을 읽는 작업에서 자주 사용됩니다.

2.1. 기본 사용 예시

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 2000);
    });
}

async function displayData() {
    const data = await fetchData();  // 프라미스가 완료될 때까지 대기
    console.log(data);  // 'Data fetched' 출력 (2초 후)
}

displayData();
  • *fetchData()*는 프라미스를 반환하는 함수로, 2초 후에 데이터를 반환합니다.
  • *await*는 프라미스가 이행될 때까지 대기하며, 그 결과를 처리할 수 있습니다.

3. 여러 비동기 작업 처리

  • *async/await*는 순차적 또는 병렬로 여러 비동기 작업을 처리할 수 있습니다. **await*를 사용하면 순차적 실행이 가능하며, **Promise.all()*과 결합하여 병렬 실행도 가능합니다.

3.1. 순차적 비동기 작업 처리

function task1() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('Task 1 complete'), 1000);
    });
}

function task2() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('Task 2 complete'), 1000);
    });
}

async function runTasks() {
    const result1 = await task1();
    console.log(result1);  // Task 1 complete (1초 후 출력)

    const result2 = await task2();
    console.log(result2);  // Task 2 complete (2초 후 출력)
}

runTasks();
  • *await*를 사용하면 비동기 작업을 순차적으로 처리할 수 있습니다. 첫 번째 작업이 완료된 후 두 번째 작업이 실행됩니다.

3.2. 병렬 비동기 작업 처리

async function runTasksInParallel() {
    const [result1, result2] = await Promise.all([task1(), task2()]);
    console.log(result1);  // Task 1 complete (1초 후 출력)
    console.log(result2);  // Task 2 complete (1초 후 출력)
}

runTasksInParallel();
  • *Promise.all()*을 사용하면 여러 비동기 작업을 병렬로 실행하고, 모든 작업이 완료될 때까지 대기할 수 있습니다.
  • 병렬 실행 덕분에, 두 작업이 동시에 처리되어 총 실행 시간이 짧아집니다.

4. 오류 처리 (Error Handling)

  • *async/await*에서는 try...catch 구문을 사용하여 비동기 작업의 오류를 처리할 수 있습니다. **await*로 기다리는 프라미스가 **거부(rejected)**되면 catch 블록에서 처리할 수 있습니다.

4.1. try...catch로 오류 처리

function fetchDataWithError() {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject('Error fetching data'), 2000);
    });
}

async function displayData() {
    try {
        const data = await fetchDataWithError();  // 오류 발생 시 예외로 처리
        console.log(data);
    } catch (error) {
        console.log('Error:', error);  // Error: Error fetching data (2초 후 출력)
    }
}

displayData();
  • try...catch 구문을 사용해 프라미스의 오류 처리를 할 수 있습니다.
  • *await*가 기다리던 프라미스가 실패하면 catch 블록에서 오류를 처리합니다.

5. await와 Promise.all()을 사용한 병렬 처리

비동기 작업을 병렬로 처리할 때, **await**를 사용하여 각 프라미스를 기다리는 대신 **Promise.all()**을 사용해 모든 작업을 병렬로 실행하고 대기할 수 있습니다.

5.1. 병렬 처리 예시

function fetchData1() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('Data 1'), 1000);
    });
}

function fetchData2() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('Data 2'), 2000);
    });
}

async function displayAllData() {
    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
    console.log(data1);  // Data 1 (1초 후 출력)
    console.log(data2);  // Data 2 (2초 후 출력)
}

displayAllData();
  • *Promise.all()*은 여러 프라미스를 병렬로 처리하고, 모든 프라미스가 완료될 때까지 기다립니다.
  • 병렬 실행으로 인해 두 작업이 동시에 완료됩니다.

6. async/await의 장점과 단점

6.1. 장점

  • 비동기 코드를 동기 코드처럼 간단하게 작성할 수 있습니다.
  • 프라미스 체이닝에 비해 가독성이 높고 구조가 간결합니다.
  • 오류 처리가 try...catch 구문을 통해 더 직관적입니다.
  • 비동기 작업을 순차적 또는 병렬적으로 쉽게 제어할 수 있습니다.

6.2. 단점

  • 오래된 브라우저에서는 **async/await*가 지원되지 않아 **폴리필(polyfill)**이 필요할 수 있습니다.
  • 비동기 작업이 매우 많은 경우, 병렬 실행을 고려하지 않으면 불필요하게 긴 대기 시간이 발생할 수 있습니다.

요약

  • *JavaScript의 async/await*는 프라미스를 더 직관적이고 가독성 높은 방식으로 처리할 수 있게 해줍니다. 비동기 프로그래밍에서 프라미스를 동기 코드처럼 작성할 수 있으며, **try...catch*를 사용하여 오류를 쉽게 처리할 수 있습니다.
  • async 함수는 비동기 함수를 정의하며, 프라미스를 반환합니다.
  • *await*는 프라미스가 완료될 때까지 기다리며, 그 결과를 반환합니다.
  • 여러 비동기 작업을 순차적 또는 병렬로 처리할 수 있으며, 오류 처리도 **try...catch*를 통해 가능합니다.
  • *Promise.all()*과 결합하여 병렬 작업을 처리할 수 있으며, 가독성 높은 비동기 코드를 작성할 수 있습니다.
  • *async/await*는 비동기 작업을 더 효

율적으로 관리할 수 있도록 돕는 강력한 도구로, 복잡한 비동기 작업을 쉽게 처리하는 데 유용합니다.

copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com