Javascript의 루프 내부 비동기 작업

프로젝트에서 루프 내에서 비동기 작업을 수행해야 하는 상황이 있었습니다. 반복 작업을 수행하기 위해 주로 맵 방법을 사용했습니다.

myIterable.map((item) => {
    //  task 1 - normal
    //  task 2 - async
})


그러나 map 메서드는 기본적으로 비동기 작업을 지원하지 않습니다. map 메서드 내에서 무언가가 비동기화되면 일부 '보류 중인 약속'을 반환합니다.
[ Promise{ <pending> },... ]
지도 메서드를 비동기식으로 만들기 위해 약속 개념으로 래핑했습니다.

논리는 세 개의 코드 블록으로 나뉩니다.

첫 번째 블록에는 약속을 반환하는 myAsyncIteration라는 함수가 있습니다. 프라미스 내에서 비동기 작업을 수행하고 다음을 전달하여 프라미스를 해결하여 완료를 확인할 수 있습니다someData.

const myAsyncIteration = (item) =>
    new Promise(async (resolve, reject) => {
        //  task 1 - normal
        //  task 2 - async
        return resolve(someData)

    })


두 번째 블록myAsyncLoop 내부에서 약속을 반환하는 myIterable에서 myAsyncIteration의 모든 인스턴스를 매핑합니다.

내부에 'n'개의 인스턴스가 있는 경우myIterable 'n'개의 약속이 반환됩니다. 이것은 Promise.all로 래핑되어 모든 약속이 실행되도록 하고 약속에서 해결된 데이터를 포함합니다.

const myAsyncLoop = async () => {
    return Promise.all(myIterable.map(async (item) =>
        myAsyncIteration(item)

    ))
}


세 번째 블록에서는 각 약속을 해결한 후 전송된 데이터 배열을 반환하는 myAsyncLoop를 호출합니다. someData의 'n'개가 arrayOfSomeData에 기여한다는 의미입니다.

myAsyncLoop().then((arrayOfSomeData) => {
    console.log(arrayOfSomeData)
    // perform the other work

})


이런 식으로 맵 메서드 내에서 비동기 작업을 수행했습니다. 이것은 내 첫 번째 블로그 게시물입니다. 의견을 공유하고 더 나은 방법이 있으면 언급하십시오.

고맙습니다.

좋은 웹페이지 즐겨찾기