네트워크 요청을 처리하다 보면 여러 개의 요청을 순차적으로 보내고 그 결과를 기다려야 할 때가 있습니다. 이때 for...of문과 async/await을 사용하여 간단하게 처리할 수 있습니다.

const urls = ['url1', 'url2', 'url3'];

const fetchData = async () => {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
};

fetchData();

위 예제에서 for...of문을 사용하여 urls 배열의 각 요소에 대한 네트워크 요청을 순차적으로 보냅니다. await 키워드를 이용하여 각 요청의 완료를 기다리고, 요청이 성공하면 데이터를 처리하고, 실패하면 에러를 처리합니다.

이를 통해 비동기 코드를 동기식으로 작성할 수 있으며, 코드의 가독성과 유지보수가 용이해집니다.

이와 관련하여 MDN Web Docs의 Async/await 문서를 참고할 수 있습니다.