JavaScript에서 for 루프 내부에서 async/await를 사용하는 방법

for 루프( ex. API calls ) 내에서 비동기 작업을 실행하려는 경우가 있습니다.

이 기사에서는 async/await 및 반복 논리를 결합하는 가능한 접근 방식에 대해 설명합니다. 실제로 어떻게 구현할 수 있는지 살펴보겠습니다.

우리는-for await...of를 사용할 것입니다.

다음은 for 루프 내에서 API 호출이 수행되는 방법을 보여주는 코드입니다.

let urls = [
"https://jsonplaceholder.typicode.com/todos/1",
"https://jsonplaceholder.typicode.com/todos/2"
]

async function makeAPICalls() {
    for await(const url of urls){
        console.log("Api call started for - ");

        let result = await fetch(url).then(res=> res.json());
        console.log("Result = ", result);

        console.log("Api call ended for - ");
    }
}

makeAPICalls();

산출

VM294:1 Api call started for - 
VM294:2 Promise {<pending>}
VM294:5 Result =  {userId: 1, id: 1, title: 'delectus aut autem', completed: false}
VM294:7 Api call ended for - 

VM294:3 Api call started for - 
VM294:5 Result =  {userId: 1, id: 2, title: 'quis ut nam facilis et officia qui', completed: false}
VM294:7 Api call ended for - 

There are many better ways, this is just another example you may want to use.