promise를 이용한 api 순차 반복 요청 보내기 (with - vue ,axios)

 

for문으로 api를 호출 하는 경우 순차적으로 반복 호출하는 경우를 적용해야하는 경우가 생겼다.
api호출이 잦아 트래픽이 높아지면 서버가 뻗어버리는 상황… 😅..?

1초 간격으로 api 반복 요청

처음에는 setTimeout으로 1초 간격을 두고 요청을 보냈다.

timeRequest(){
  const arr = ['첫번째','두번째','세번째','네번째']
  arr.forEach((titem, index) => {
    setTimeout(function() {
      this.getRes(titem)
    }, 1000 * (index + 1))
  })
}

getRes(){
  // api 호출 함수
  this.axios.post("api주소",{ num }) 
  .
  .
}

arr를 순회하면서 그 값을 순차적으로 api의 body에 넣어서 api 요청을 보낸다.
1. ("api주소",{'첫번째'})의 요청을 보냄
2. 응답과 상관없이 ("api주소",{'두번째'})의 요청을 보냄

...... api요청을 arr의 length만큼 반복하며 1초마다 응답을 보내는 형태

 

 

근데 위의 방식이 아닌 요청의 이전에 요청한 api의 응답이 와야
다음 요청을 보내는 형태로 바꿔달라고 하심..!

 

첫번째 보낸 api의 응답이 정상적으로 온 경우에만 다음 요청을 보냄

async sequentialRequest(num) {
  const arr = ['첫번째','두번째','세번째','네번째']
  for (let i = 0; i < arr.length; i++) {
    try {
      // (3)
      await this.getRes(arr[i])
    } catch (err) {
      // (4)
      console.log(err)
    }
  }
}

getRes(num) {
  return new Promise((resolve, reject) => {
    this.axios.post("api주소",{ num })  // api주소, body에 보낼 값 위에서 받은 num[i]값
      .then(() => {
        // (1) 정상적인 응답이 왔을때 
        resolve("compleate")
      })
      .catch(() => {
        // (2) 정상적인 응답을 받지 못했을때 
        reject("network err")
      })
  })
}

arr를 순회하면서 그 값을 순차적으로 api의 body에 넣어서 api 요청을 보낸다.
1. ('"api주소",{'첫번째'})의 응답이 오면,
2. (1)으로 이동해 해당한 코드를 실행하고 resolve 값이 반환되고 (3)으로 이동하여('"api주소",{'두번쨰'})로 요청을 보내고
....... 응답이 오면 위와 같은 api요청을 arr의 length만큼 반복해 '네번째'까지 실행한다.
3. 만약 api 요청시 정상적인 응답을 받지 못한다면 (2)로 이동해 코드를 실행하고
    (4)번으로 이동해 "network err"가 console에 찍히고 api 요청이 중단된다.

---

✔️참고
https://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values

https://ninano1109.tistory.com/38