n 번의 비동기 요청 시 Promise 재귀함수 처리

n번의 비동기 요청 시 Promise 재귀함수 처리

상황

공공 API 데이터를 활용 중 최대 1000 개의 데이터만 불러올 수 있는 제한사항으로 인해 전체 데이터를 불러와 데이터를 추출하는 과정에 문제가 생겼다.

다행히 API 요청 결과 데이터 중 전체 데이터의 전체 개수를 나타내는 데이터가 존재해 이를 활용하여 n 번의 요청으로 (n x 1000) 개의 데이터를 가져오도록 설계하기로 했다.

설계

1. 비동기 처리의 실행 순서를 보장하기 위해 async await 키워드를 사용
2. 원하는 만큼의 API 요청하기 위해 재귀함수로 형태를 활용

코드

코드 설명

1. axios 패키지를 활용해 API 데이터를 처리할 함수를 선언
2. 함수안에 재귀 함수로 활용할 함수 recursiveReq를 async 키워드와 함께 선언
3. axios.get 메서드를 통해 실제 API 요청에 반환되는 promise 객체를 반환
4. 반환된 promise 객체를 활용해 then 메서드안에서 특정 조건에 맞게 재귀함수를 다시 호출하거나 종료
5. 재귀 함수를 거쳐 완성된 결과값을 리턴

※ 실제 활용한 코드에서 처리 과정을 나타낼 수 있는 부분만 아래 예시코드로 나타냈으므로 유의

// API 함수
export const getDataAPI = async (param) => {
  const { searchText } = param // 가상의 요청인자
  const result = []

  // API 요청을 할 가상의 재귀 함수
  const recursiveReq = async () => {
    // 가상의 axios 요청 부분
    await axios.get('APIURL')
      .then(async (data) => {
        // 비동기 요청으로 반화된 가상의 데이터 배열
        const apiDataArr = data.data

        // 검색 옵션에 맞는 데이터 추출 후 결과 배열에 저장
        result.push(...apiDataObj.row.filter((data) =>  data.FACLT_NM === searchText))

        // 반환되는 배열이 있다면 요청을 다시 보냄
        if (apiDataArr.length > 0) await recursiveReq()
      })
  }

  // 재귀 함수 실행 부분
  await recursiveReq()

  return result      
}

---

참고

https://hidiki.github.io/javascript/promise-resolve-order.html#_1-%EC%9E%AC%EA%B7%80%ED%95%A8%EC%88%98%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95