forEach 다음 내용이 먼저 돌아가요

배열을 forEach에 돌리고 작업을 하는데 안에 await 이라는 코드가 있어 다 돌고 다음 코드가 진행을 하겠지?

하고 코드를 만들었습니다. 

 

let deleteCount = 0;
subProductCheckboxes.forEach(async checkbox => {
    if(checkbox.checked){
        const product_id = checkbox.value;
        const result = await deleteProductData(product_id);
        console.log(result);
        if(result.code === 200){
            deleteCount++;
        }
    }
});
console.log(deleteCount);

if(deleteCount > 0){
    alert("삭제되었습니다.");
    window.location.reload();
}

 

delete 성공을 하면 deleteCount 값이 올라가 마지막 사용자에게 알려주고 화면을 새로고침 하는 쉬운 코드였습니다.

 

하지만 콘솔에는 0이라는 값이 나왔습니다.

이때 어떻게 해결 하나요??

 

1. for 문을 돌려 해결을 합니다.

for 루푸문은 동기적으로 실행되기 때문에 for 루푸 내에서 await을 사용하면 실행이 다 될 때까지 기다립니다.

반면 forEach, map 메소드는 비동기 작업으로 기다리지 않고 다음 작업을 실행합니다. 

그래서 기다려줘야 하는 코드가 필요합니다.

 

2. Promise.all 로 결과를 기다리는 방법

let deleteCount = 0;
  
let deletePromises = Array.from(subProductCheckboxes).map(async checkbox => {
    if(checkbox.checked){
        const product_id = checkbox.value;
        const result = await deleteProductData(product_id);
        console.log(result);
        if(result.code === 200){
            deleteCount++;
        }
    }
});

await Promise.all(deletePromises);
console.log(deleteCount);
if(deleteCount > 0){
    alert("삭제되었습니다.");
    window.location.reload();
}

 

await Promise.all(deletePromises);는 JavaScript의 비동기 처리 패턴 중 하나입니다.

Promise.all() 메소드는 Promise 객체들의 배열을 인자로 받아, 모든 Promise가 성공적으로 완료될 때까지 기다리는 새로운 Promise를 반환합니다. 

반환된 Promise는 모든 Promise가 성공적으로 완료되면 이들의 결과를 배열로 반환합니다.

 

await 키워드는 Promise가 해결될 때까지 함수의 실행을 일시 중지하고, Promise가 해결되면 그 결과를 반환합니다. 

따라서 await Promise.all(deletePromises);는 deletePromises 배열에 있는 모든 Promise가 성공적으로 완료될 때까지 기다리고, 그 결과를 반환합니다. 

 

이는 deletePromises 배열의 모든 비동기 작업이 완료될 때까지 기다리는 효과를 가집니다.

 

 

이상 까먹지 않기 위해 적어놨습니다.