Axios는 React나 Angular와 같은 프론트엔드 프레임워크에서 널리 사용되는 HTTP 클라이언트 라이브러리입니다. 이 라이브러리를 사용하여 서버에 HTTP 요청을 보내고 응답을 받을 수 있습니다. 때로는 여러 요청 중에 일부 요청에 대해 우선순위를 부여해야 할 수도 있습니다. 이런 경우를 처리하기 위해서 우리는 Axios의 interceptor를 사용할 수 있습니다.

Axios Interceptor를 활용한 우선순위 처리

Axios의 interceptor를 사용하여 요청에 우선순위를 부여할 수 있습니다. Interceptor는 request, response, error와 같은 HTTP 요청과 응답을 가로채고 변형할 수 있는 기능을 제공합니다.

아래는 타입스크립트에서 Axios interceptor를 사용하여 우선순위 처리하는 간단한 예제입니다.

import axios, { AxiosRequestConfig } from 'axios';

let priorityRequests: AxiosRequestConfig[] = [];

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use((config) => {
  if (priorityRequests.length > 0) {
    const nextRequest = priorityRequests.shift();
    // 우선순위가 높은 요청 실행
    return nextRequest;
  }
  return config;
});

// 우선순위에 따라 요청 추가
function addToPriorityQueue(requestConfig: AxiosRequestConfig) {
  priorityRequests.push(requestConfig);
}

// 기본 요청 보내기
axiosInstance.get('https://example.com/data');

// 우선순위가 높은 요청 추가 후 보내기
addToPriorityQueue({ method: 'get', url: 'https://example.com/high-priority-data' });

위의 예제에서는 axiosInstance를 생성하고 이를 이용하여 HTTP 요청을 보냅니다. addToPriorityQueue 함수를 통해 우선순위가 높은 요청을 추가할 수 있습니다. Interceptor를 이용하여 요청을 가로채고 우선순위에 따라 처리할 수 있도록 합니다.

우선순위 처리에 대한 추가적인 로직이나 에러 핸들링 등은 프로젝트의 요구사항에 맞게 구현할 수 있습니다.

우선순위 처리를 통해 HTTP 요청을 보낼 때 중요한 요청에 대한 처리를 원할하게 할 수 있습니다.

간단한 우선순위 처리 로직을 구현하는 방법에 대해 알아보았습니다. 여러분의 프로젝트나 상황에 맞게 이를 응용하여 원하는 동작을 구현해보시기 바랍니다.

참고 자료

• Axios Interceptors
• Using interceptors in Axios