[typescript] 비동기 작업의 취소 및 타임아웃 처리를 위한 async/await 활용 방법

08 Dec 2023

typescript

비동기 작업을 수행하는 중에는 종종 해당 작업을 취소하거나 일정 시간 이상이 지나면 타임아웃 처리를 해야 하는 경우가 있습니다. TypeScript에서는 async/await를 통해 이러한 비동기 작업의 취소와 타임아웃 처리를 간단하게 구현할 수 있습니다.

1. Promises와 Async/Await

TypeScript에서 비동기 작업은 주로 Promise 객체를 반환하는 함수로 구현됩니다. 이때 async/await 키워드를 사용하여 비동기 작업을 보다 간편하게 처리할 수 있습니다.

async function fetchData(): Promise<any> {
    // 비동기 작업 수행
    return await someAsyncOperation();
}

2. 비동기 작업의 취소

비동기 작업을 취소하기 위해서는 Promise 객체의 상태를 체크하여 적절한 조치를 취해야 합니다. 가장 간단한 방법은 Promise 객체를 감싸는 래퍼 함수를 만들어 취소 여부를 체크하는 것입니다.

function cancelablePromise<T>(promise: Promise<T>): [Promise<T>, () => void] {
    let hasCanceled = false;

    const wrappedPromise = new Promise<T>((resolve, reject) => {
        promise.then(
            (val) => (hasCanceled ? reject(new Error('취소됨')) : resolve(val)),
            (error) => (hasCanceled ? reject(new Error('취소됨')) : reject(error))
        );
    });

    return [
        wrappedPromise,
        () => {
            hasCanceled = true;
        }
    ];
}

3. 비동기 작업의 타임아웃 처리

타임아웃을 적용하기 위해서는 Promise 객체의 race 메서드를 활용할 수 있습니다.

function withTimeout<T>(promise: Promise<T>, timeout: number): Promise<T> {
    return Promise.race([
        promise,
        new Promise((resolve, reject) => {
            setTimeout(() => {
                reject(new Error('타임아웃'));
            }, timeout);
        })
    ]);
}

마무리

async/await를 활용하여 TypeScript에서 비동기 작업의 취소와 타임아웃 처리를 쉽게 구현할 수 있습니다. 이를 통해 안정적이고 예측 가능한 비동기 코드를 작성할 수 있으며, 애플리케이션의 성능과 안정성을 향상시킬 수 있습니다.

참고문헌: