들어가기 앞서, promise, async, await을 모르는 분은 아래의 링크를 먼저 읽도로 합시다.
https://www.blogger.com/blog/post/edit/5763507515709642449/5970595066280268078
개발을 하다보면, 여러개의 네트워크 요청을 한번에 처리해야 하는 경우가 많다. 간단하게 아래처럼 시간이 10초 이내로 랜덤하게 걸리는 요청이 있다고 해보자.
const callApi = (param) => {
return new Promise(resolve => setTimeout(() => resolve(param),
Math.floor(Math.random() * 5) * 1000))
}
1. 간단하게 아래와 같은 코드로 여러번의 호출을 실행해보았다.
const paramList = [ 1, 2, 3, 4, 5 ]
for(const param of paramList) {
callApi(param).then(res => console.log(res))
}
2. 위와 같이 정상적으로 실행이 되었다. 하지만, 결과에 대한 표시와 요청순가 달라져서 순서대로 표시가 되게 수정을 해달라고 요청이 왔다.
const promises = []
for(const param of paramList) {
promises.push(callApi(param))
}
Promise.all(promises).then(resList => resList.forEach(res => console.log(res)))
3. 위와 같이 코드를 변경 하여서 모든 요청이 완료 되고나서 요청 순서대로 표시가 되게 수정을 완료 하였지만, 이번엔 백엔드 개발자 분이 오셔서 1 ~ 5번까지 순서대로 요청을 하고, 요청이 완료되면 다음 요청을 보내달라고 요청을 해왔다.
async function process() {
for(const param of paramList) {
const res = await callApi(param)
console.log(res)
}
}
process()
이 처럼 처리하는 것은 제일 느리지만, 요청을 하고 결과를 받고 요청 순서대로 결과에 대한 표시도 가능하게 되었다.
위 처럼 여러가지의 순회 방법이 존재 하고, 상황에 알맞도록 사용 하여야 한다.
댓글
댓글 쓰기