Promise.all + map

회사에서 firebase database에서 데이터들을 받아오고 화면에 띄우는 작업을 하는 도중, 전체 데이터가 안받아져 오는 에러를 발견했다. 코드상 문제는 없었다고 생각해서 계속 고쳐봤는데도 똑같은 문제가 발생해서 서칭을 해보니 js 에서 map 은 그 자체로 체이닝을 할 수 없고 , map 이후에 코드를 실행하려면 Promise.all 을 사용해 줘야 한다는 것을 발견했다.

Promise.all(arr.map(data)=>{
~~~~~~~~
).then(()=>{
~~~~
})
}

이런식으로 map 을 한번에 Promise.all() Scope 로 감싸주면 , map에서 여러번 반복되는 데이터를 한꺼번에 모아서 할수있어진다!
하지만 이 방식은 map 의 새로운 원소들은 끝나는 순서대로 리턴되기에, 순서가 보장 되지 않고, 하나라도 실패할 경우 로직실패처리를 띄우게 된다는 문제가 있다.

순서대로 결과값을 주고 싶다면, reduce 를 사용하면 된다

 

let messages = []
await arr.reduce(async (promise , data)=>{
await promise
const newData = await func(data)
messages.push(newData)
)},Promise.resolve())

data 는 newData 가 채워지기 전까지 기다리고, 이는 곧 순서대로 명령받은 상태에서 newData도 순서대로 채워진다는 뜻이다!!!