forEach 루프와 함께 async/await 사용하기

async / await를 사용하는 데 문제가 있나요? 파일 배열을 루프하여 각 파일의 내용에 대해 await합니다.

import fs from 'fs-promise'

async function printFiles () {

const files = await getFilePaths() // Assume this works fine

files.forEach(async (file) => {

const contents = await fs.readFile(file, 'utf8')

console.log(contents)

})

}

printFiles()

이 코드는 작동하지만 도중에 문제가 발생할 수 있나요? 누군가가 이렇게 상위 함수에서 async / await를 사용해서는 안 된다고 말했기 때문에 이게 문제가 되지는 않을까 해서 여쭤보고 싶습니다.

답변 1

코드는 정말 동작하지만, 당신이 기대하는 대로 수행하지 않을 것 같습니다. 그것은 여러 가지 비동기 호출을 발생시키지만, printFiles 함수는 즉시 반환합니다.

연속적으로 읽기

만약 파일을 순서대로 읽고 싶다면 forEach 는 사용할 수 없습니다. 대신 현대적인 for … of 루프를 사용하세요. 이 루프에서 await 는 예상대로 작동합니다.

async function printFiles () {

const files = await getFilePaths();

for (const file of files) {

const contents = await fs.readFile(file, 'utf8');

console.log(contents);

}

}

병렬로 읽기

만약 파일을 병렬로 읽으려면, forEach을 사용할 수 없습니다. 각각의 async 콜백 함수 호출은 프로미스를 반환하지만, 이를 기다리지 않고 버리고 있습니다. 대신에 map을 사용하면 Promise.all로 얻을 수 있는 프로미스 배열을 기다릴 수 있습니다.

async function printFiles () {

const files = await getFilePaths();

await Promise.all(files.map(async (file) => {

const contents = await fs.readFile(file, 'utf8')

console.log(contents)

}));

}

답변 2

제목: forEach 루프와 함께 async/await 사용하기

async/await은 콜백 지옥(callback hell)을 해결하는 데 큰 도움이 되는 ES2017의 새로운 기능입니다. 이 기능은 Promise를 더 쉽게 사용할 수 있도록 해주며, 비동기 코드를 동기적으로 작성할 수 있게 해줍니다.

그러나 forEach 루프와 함께 async/await을 사용하는 것은 조금 더 어려울 수 있습니다. 이는 forEach가 비동기적이지 않기 때문입니다. 따라서 forEach에서 await을 사용하면 원하는 대로 작동하지 않을 수 있습니다.

이 문제를 해결하기 위해 우리는 일반적으로 for 루프와 함께 async/await을 사용합니다. 하지만 이는 코드를 보다 복잡하게 만들 수 있습니다.

그러나 forEach 루프와 함께 async/await을 사용하기 위해서는 간단한 팁을 따르면 됩니다. 예를 들어, 우리는 forEach 루프에서 Promise.all을 사용할 수 있습니다.

Promise.all을 사용하면 forEach 루프를 동기적으로 처리할 수 있습니다. 또한 Promise.all을 사용하면 각 Promise가 완료될 때까지 기다릴 수 있습니다.

다음은 forEach 루프와 함께 async/await을 사용하는 예시입니다.

const asyncForEach = async (array, callback) => {

for (let index = 0; index < array.length; index++) {

await callback(array[index], index, array)

}

}

const myFunction = async () => {

const array = [1, 2, 3]

await asyncForEach(array, async (num) => {

const result = await fetchData(num)

console.log(result)

})

console.log('Done')

}

myFunction()

위 코드에서는 fetchData 함수가 각 항목을 처리합니다. 이 함수는 Promise를 반환하며, 각 Promise가 완료될 때까지 기다립니다. 또한 asyncForEach 함수는 forEach와 비슷하지만 async/await을 사용하여 각 항목을 순서대로 처리합니다.

따라서 forEach 루프와 함께 async/await을 사용하는 것은 가능하지만, Promise.all과 같은 도구를 사용하여 이를 보다 쉽게 처리할 수 있습니다. 이를 활용하면 코드를 간단하고 효율적으로 작성할 수 있습니다.

이상으로, forEach 루프와 함께 async/await을 사용하는 방법에 대해 알아보았습니다. 이 팁을 따르면 비동기 코드를 보다 쉽게 작성할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다.