비동기 코드에서 반복문을 사용하다가 중간에 멈추고 싶은 경우가 있습니다. TypeScript의 for...of 문과 async/await를 사용하여 이러한 상황을 다룰 수 있습니다.
이 기능을 사용하여 비동기 작업을 중단하고 재시작하는 방법을 살펴보겠습니다. 코드의 가독성을 높이고 유지보수성을 향상시키는 데 도움이 될 것입니다.
1. for...of 문과 async/await
for...of 문은 배열 또는 이터러블 객체의 각 요소에 대해 반복하는 데 사용됩니다. async/await는 비동기 작업을 보다 선언적이고 동기적으로 다루도록 도와줍니다.
이 두 가지를 함께 사용하면 비동기 작업을 일시 중단하고 재개할 수 있습니다.
예를 들어, 다음과 같이 for...of와 await를 결합하여 비동기적으로 API를 호출하는 작업을 수행할 수 있습니다.
async function callAPIs(urls: string[]) {
for (const url of urls) {
const response = await fetch(url);
const data = await response.json();
console.log(data);
}
}
위 예제에서 for...of 루프를 사용하여 urls 배열의 각 요소에 대해 순회하고, fetch 함수를 사용하여 각 URL에 대한 비동기 호출을 수행하고 있습니다.
2. 비동기 작업의 중단과 재시작
for...of 루프와 await를 사용하면 중간에 작업을 멈출 수 있습니다. 예를 들어, 특정 조건을 만족할 때만 API 호출을 수행하고 싶다면 다음과 같이 코드를 수정할 수 있습니다.
let shouldCallAPI = true;
async function callAPIs(urls: string[]) {
for (const url of urls) {
if (!shouldCallAPI) {
console.log('API 호출이 중단되었습니다.');
break;
}
const response = await fetch(url);
const data = await response.json();
console.log(data);
}
}
위 예제에서 shouldCallAPI 변수를 사용하여 API 호출을 중단시킬 수 있는 조건을 만들었습니다. 루프 내부에서 해당 조건을 확인하고, 만족할 경우 작업을 중단하고 메시지를 출력한 후 루프를 종료합니다.
마무리
for...of 문과 await를 함께 사용하여 비동기 작업을 중단하고 재개하는 방법을 알아보았습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다. 이러한 기능을 사용하여 적절한 시점에 비동기 작업을 멈추거나 재시작할 수 있으며, 이는 어떠한 비동기 코드에서도 유용하게 활용될 수 있습니다.
이러한 패턴은 비동기 프로그래밍에서 유용한 도구이므로, 적절한 상황에서 적극적으로 활용해보시기 바랍니다.
참고 자료
관련 내용: TypeScript, async/await, for…of, 비동기 프로그래밍