[typescript] Axios를 사용하여 요청 큐와 배치 요청 처리하기

22 Dec 2023

typescript

Axios는 Node.js와 브라우저를 위한 강력한 HTTP 클라이언트이다. 이 글에서는 Axios를 사용하여 요청 큐를 관리하고 배치 요청을 처리하는 방법에 대해 알아보겠다.

요청 큐

대형 응용 프로그램에서는 동시에 여러 HTTP 요청을 처리해야 할 때가 있다. 해당 요청을 순차적으로 보낼 필요가 있는 경우, Axios의 axios.Queue를 사용할 수 있다.

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';

class RequestQueue {
  private queue: AxiosRequestConfig[];
  private axios: AxiosInstance;

  constructor() {
    this.queue = [];
    this.axios = axios.create();
  }

  addRequest(requestConfig: AxiosRequestConfig) {
    this.queue.push(requestConfig);
  }

  processQueue() {
    this.queue.forEach((requestConfig) => {
      this.axios.request(requestConfig)
        .then((response) => {
          // 처리된 응답에 대한 작업 수행
        })
        .catch((error) => {
          // 오류 처리
        });
    });
  }
}

위의 예제는 RequestQueue 클래스를 사용하여 요청을 큐에 추가하고 순차적으로 처리하는 방법을 보여준다.

배치 요청

대량의 요청을 동시에 보내야 하는 경우, Axios의 axios.spread와 axios.all을 사용하여 배치 요청을 처리할 수 있다.

axios.all([
  axios.get('/user/1'),
  axios.get('/user/2')
])
  .then(axios.spread((user1, user2) => {
    // user1과 user2에 대한 처리
  }))
  .catch((error) => {
    // 오류 처리
  });

위의 예제는 두 개의 GET 요청을 동시에 보내고, 모든 요청이 완료되면 결과를 처리하는 방법을 보여준다.

Axios를 사용하여 요청 큐를 관리하고 배치 요청을 처리함으로써, 더 효율적으로 HTTP 요청을 다룰 수 있다.

이상으로 Axios를 사용하여 요청 큐와 배치 요청을 처리하는 방법에 대해 알아보았다.