[Nuxt.js] Promise.all() 함수를 사용하여 여러 개의 HTTP 요청(Axios) 처리하기

Promise.all() 함수 사용 이유

하나 이상의 HTTP 요청이 필요한 경우 단순히 forEach 문을 사용하여 처리하면 되겠지만, 단순 forEach문을 사용하여 처리하면 HTTP 요청의 완료 시점을 알 수가 없는 단점이 있다.
그래서 사용하는 것이 Promise.all() 함수이다.

Promise.all() 함수 사용 방법

// .vue

Promise.all() 함수 사용 시 문제점

저의 경험상 API 에서 요청이 온 순서대로 완료가 되지 않는다는 것이다.
그렇다는 것은 첫 번째로 요청 한다고 해서 DB에 두 번째, 세 번째 보다 먼저 저장된다는 보장이 없다는 것이다. 저장되는 순서 상관없이 저장만 되면 되는 로직은 크게 신경쓰지 않아도 된다.
하지만 저장되는 순서가 중요하다면 Promise.all() 함수 대신 callback 함수를 사용해야한다.

=> 콜백(callback) 함수를 사용하여 여러 개의 HTTP 요청(Axios) 처리하기