비동기 작업 중에 일부 작업을 취소하는 것은 애플리케이션에서 중요한 과제일 수 있습니다. TypeScript에서는 이를 수행하기 위한 몇 가지 방법이 있습니다. 이 글에서는 Promises, async/await, rxjs 등의 다양한 방식으로 비동기 작업 중의 일부 작업을 취소하는 방법에 대해 알아보겠습니다.
Contents
Promises를 이용한 작업 취소
JavaScript Promise는 주어진 작업을 비동기적으로 수행할 수 있는 객체입니다. 한 가지 방법은 프로미스를 사용하여 비동기 작업을 추적하고 AbortController를 사용하여 작업을 취소하는 것입니다.
다음은 AbortController를 사용하여 프로미스를 취소하는 TypeScript 코드의 예시입니다.
const controller = new AbortController();
const signal = controller.signal;
const myPromise = new Promise((resolve, reject) => {
const timer = setTimeout(() => {
resolve('작업 완료');
}, 1000);
signal.addEventListener('abort', () => {
clearTimeout(timer);
reject(new Error('작업 취소됨'));
});
});
myPromise.then((result) => {
console.log(result);
}).catch((error) => {
console.error(error.message);
});
// 작업을 취소하기 위해 controller.abort() 호출
controller.abort();
async/await를 이용한 작업 취소
async/await는 프로미스를 더 쉽게 사용할 수 있게 해주는 ES2017의 기능입니다. async 함수 안에서 await를 사용하여 프로미스가 처리될 때까지 기다릴 수 있습니다.
아래는 async/await를 사용하여 작업을 취소하는 방법을 보여주는 TypeScript 코드의 예시입니다.
function delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function exampleTask() {
try {
await delay(1000);
console.log('작업 완료');
} catch (error) {
console.error('작업 취소됨');
}
}
const task = exampleTask();
// 작업을 취소하기 위해 Promise의 reject 메서드를 호출
task.catch((error) => {
console.error('작업 취소됨');
});
rxjs를 이용한 작업 취소
rxjs는 자바스크립트의 반응형 프로그래밍 라이브러리 중 하나로, 비동기 데이터 스트림을 쉽게 다룰 수 있게 해줍니다. 이 라이브러리를 사용하여 작업을 취소할 수도 있습니다.
아래는 rxjs를 사용하여 작업을 취소하는 TypeScript 코드의 예시입니다.
import { Observable, Subscriber, Subscription } from 'rxjs';
function exampleObservable(): Observable<number> {
return new Observable((observer: Subscriber<number>) => {
const timer = setTimeout(() => {
observer.next(1);
observer.complete();
}, 1000);
return () => {
clearTimeout(timer);
};
});
}
const sub: Subscription = exampleObservable().subscribe(
(value: number) => {
console.log('작업 완료');
}
);
// 작업을 취소하기 위해 Subscription의 unsubscribe 메서드를 호출
sub.unsubscribe();
비동기 작업 중의 일부 작업을 취소하는 방법에는 이처럼 다양한 접근 방식이 있습니다. 프로미스, async/await, 그리고 rxjs 등을 효과적으로 사용하여 애플리케이션에서 비동기 작업을 관리하고 원하는 작업을 취소하는 방법을 선택할 수 있습니다.