웹 개발의 빠르게 변화하는 세계에서 API 요청을 효율적으로 관리하는 것은 매우 중요합니다. 때로는 리소스를 절약하거나 원치 않는 결과를 방지하기 위해 이러한 요청을 취소해야 할 필요가 있습니다. Axios는 이러한 시나리오를 처리하는 매끄러운 방법을 제공하는 인기 있는 JavaScript 라이브러리입니다. 이 블로그 게시물에서는 Axios로 API 요청을 취소하는 복잡성을 탐구하고 API 테스트 및 관리를 단순화하는 도구인 Apidog를 소개하겠습니다. 그리고 가장 좋은 점은? Apidog를 무료로 다운로드할 수 있습니다!
요청을 취소해야 하는 이유
친근한 시나리오로 시작해 봅시다. 웹 앱을 위한 검색 기능을 구축한다고 상상해 보세요. 사용자가 검색 상자에 입력할 때, API에서 제안을 가져오고 싶습니다. 그러나 사용자가 빠르게 계속 입력하면 각각의 키 입력에 대해 불필요한 요청으로 서버를 압도하고 싶지 않습니다. 대신, 보류 중인 요청을 취소하고 최신 요청만 보내고 싶습니다. 바로 여기서 axios 취소 요청이 들어옵니다!
Axios 취소 요청 방식
그러면 이 취소 기능은 어떻게 작동할까요? 그 비결은 CancelToken에서 비롯됩니다. Axios에서 제공하는 이 토큰은 "취소 가능한 작업"을 생성하고 특정 요청과 연결하는 데 사용됩니다. 작업을 취소하기로 결정하면 Axios는 해당 요청을 자동으로 중지합니다.
CancelToken 생성하기
시작하려면 Axios에서 CancelToken을 가져와야 합니다:
import axios from 'axios';
const source = axios.CancelToken.source();
source 객체에는 두 개의 속성이 있습니다: token과 cancel. token 속성은 Axios 요청과 함께 전달하는 것이고, cancel 함수는 요청을 취소하는 데 사용됩니다.
취소 가능한 요청 만들기
이제 CancelToken이 있으므로 Axios 요청에 다음과 같이 첨부할 수 있습니다:
axios.get('/api/suggestions', {
cancelToken: source.token
})
.then(response => {
// 성공적인 응답 처리
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
// 취소 처리
} else {
// 다른 오류 처리
}
});
source.token을 cancelToken 옵션으로 전달함으로써 이 요청이 취소 가능하다는 것을 Axios에 알리는 것입니다. 요청이 성공적으로 취소되면 Promise는 Cancel 객체와 함께 거부되며, 이를 catch 블록에서 처리할 수 있습니다.
요청 취소하기
사실 요청을 취소하려면 source 객체에서 제공하는 cancel 함수를 호출하면 됩니다:
source.cancel('사용자에 의해 작업이 취소되었습니다.');
취소 사유를 선택적으로 전달할 수 있으며, 이는 거부된 Promise에서 발생한 Cancel 객체에 포함됩니다.
실제 사례: Axios 취소 요청을 사용한 검색 제안
기본을 이해했으니, 실제 시나리오에서 axios 취소 요청을 구현하는 방법을 살펴보겠습니다. React와 apidog API(테스트 목적으로 사용되는 더미 API)를 사용하여 간단한 검색 제안 기능을 구축합니다.
먼저 React 구성 요소를 설정해 보겠습니다:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const SearchSuggestions = () => {
const [query, setQuery] = useState('');
const [suggestions, setSuggestions] = useState([]);
const [cancelToken, setCancelToken] = useState(null);
// ... (구성 요소 로직이 여기 들어갑니다)
return (
<div>
<input
type="text"
value={query}
onChange={handleInputChange}
placeholder="검색..."
/>
<ul>
{suggestions.map(suggestion => (
<li key={suggestion}>{suggestion}</li>
))}
</ul>
</div>
);
};
다음으로, apidog API에서 제안을 가져올 handleInputChange 함수를 구현해 보겠습니다:
const handleInputChange = (event) => {
const newQuery = event.target.value;
setQuery(newQuery);
// 이전 요청이 존재하면 취소하기
if (cancelToken) {
cancelToken.cancel('이전 요청 취소');
}
// 현재 요청을 위한 새로운 CancelToken 생성
const source = axios.CancelToken.source();
setCancelToken(source);
// 새로운 CancelToken을 사용하여 API 요청하기
axios.get(`https://api.apidog.com/suggestions?query=${newQuery}`, {
cancelToken: source.token
})
.then(response => {
setSuggestions(response.data.suggestions);
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('요청이 취소되었습니다:', thrown.message);
} else {
console.error('제안 가져오기 오류:', thrown);
}
});
};
이 예제에서는 새로운 요청을 만들기 전에 이전 요청을 취소하고 있습니다. 각 요청마다 새로운 CancelToken을 생성하고, 이를 setCancelToken 함수를 사용하여 구성 요소 상태에 저장합니다. 사용자가 검색 상자에 입력할 때 우리는 이전 요청을 취소(존재하는 경우)하고 업데이트된 쿼리와 새로운 CancelToken으로 새 요청을 만듭니다.
요청이 성공적으로 취소되면 catch 블록에서 취소를 처리하고 이유를 기록합니다. 다른 오류가 발생하면 그것도 캐치되고 기록됩니다.
고급 기술
axios 취소 요청의 기본기를 익혔으니, 여러분의 기술을 더욱 향상시킬 수 있는 몇 가지 고급 기술을 살펴보겠습니다.
자동 취소 요청이 가능한 재사용 가능한 Axios 인스턴스
모든 요청에 대해 새로운 CancelToken을 생성하는 대신, 새로운 요청이 발생할 때 이전 요청을 자동으로 취소하는 재사용 가능한 Axios 인스턴스를 생성할 수 있습니다. 이 접근법은 여러 구성 요소가 API 요청을 수행하는 복잡한 애플리케이션과 작업할 때 특히 유용할 수 있습니다.
다음은 그러한 인스턴스를 생성하는 방법의 예입니다:
import axios from 'axios';
const axiosInstance = axios.create();
let cancelToken;
axiosInstance.interceptors.request.use(
config => {
if (cancelToken) {
cancelToken.cancel('이전 요청을 취소합니다.');
}
config.cancelToken = new axios.CancelToken(c => {
cancelToken = c;
});
return config;
},
error => Promise.reject(error)
);
export default axiosInstance;
이 예제에서는 axios.create()를 사용하여 새로운 Axios 인스턴스를 생성합니다. 그런 다음 요청을 위한 인터셉터를 설정하여 새 요청을 만들기 전에 자동으로 이전 요청을 취소합니다. cancelToken은 전역적으로 저장되고 각 새 요청의 cancelToken 옵션에 할당됩니다.
그런 다음 애플리케이션 전반에 걸쳐 API 요청을 위해 이 axiosInstance를 사용할 수 있으며, 요청 취소를 자동으로 처리합니다.
여러 개의 취소 가능한 요청 처리하기
경우에 따라 하나의 구성 요소 또는 함수에서 여러 개의 취소 가능한 요청이 있을 수 있습니다. 이 상황을 처리하기 위해, 여러 CancelToken 인스턴스를 저장하기 위해 배열이나 객체를 사용할 수 있습니다.
여기 여러 개의 취소 요청을 관리하는 방법의 예가 있습니다:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MultipleRequests = () => {
const [cancelTokens, setCancelTokens] = useState({});
const fetchData = (endpoint) => {
// 동일한 엔드포인트에 대한 기존 요청 취소
if (cancelTokens[endpoint]) {
cancelTokens[endpoint].cancel('이전 요청 취소');
}
// 현재 요청을 위한 새로운 CancelToken 생성
const source = axios.CancelToken.source();
setCancelTokens(prevTokens => ({ ...prevTokens, [endpoint]: source }));
// 새로운 CancelToken을 사용하여 API 요청 만들기
axios.get(`https://api.apidog.com/${endpoint}`, {
cancelToken: source.token
})
.then(response => {
// 성공적인 응답 처리
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('요청이 취소되었습니다:', thrown.message);
} else {
console.error('데이터 가져오기 오류:', thrown);
}
});
};
return (
<div>
<button onClick={() => fetchData('endpoint1')}>데이터 1 가져오기</button>
<button onClick={() => fetchData('endpoint2')}>데이터 2 가져오기</button>
</div>
);
};
이 예제에서는 cancelTokens 객체를 사용하여 여러 개의 CancelToken 인스턴스를 저장하며, 엔드포인트를 키로 사용합니다. 새 요청을 만들 때, 우리는 먼저 해당 엔드포인트에 대한 기존 CancelToken이 있는지 확인하고 필요한 경우 이를 취소합니다. 그런 다음 새 CancelToken을 생성하고 cancelTokens 객체에 저장하여 해당 엔드포인트의 기존 값을 덮어씌웁니다.
이 접근법을 통해 동일한 구성 요소나 함수 내에서 여러 개의 취소 가능한 요청을 관리하여 각 엔드포인트에 대해 최신 요청만 실행되도록 할 수 있습니다.
Apidog로 API 요청을 취소하는 방법
Apidog를 사용하여 API 요청을 취소하려면 일반적으로 다음 단계를 따릅니다:
- Apidog를 열고 새 요청을 생성합니다.
2. 요청 방법을 DELETE로 설정합니다.
3. 삭제하려는 리소스의 URL을 입력하고 필요한 추가 헤더나 매개변수를 추가합니다.
4. “전송” 버튼을 클릭하여 요청을 보내고 응답을 분석합니다.
이렇게 하면 지정된 URL에 DELETE 요청이 전송되며, 이는 API를 통해 리소스를 제거하는 표준 방법입니다. 그러나 진행 중인 요청을 취소하려는 경우, 이것은 API의 기능과 진행 중인 요청의 취소를 지원하는지에 따라 Apidog에서 직접 지원되지 않을 수 있습니다.
취소를 지원하지 않는 API의 경우, 서버 측에서 이 기능을 구현해야 하며, 서버가 취소 신호를 확인하고 요청 처리를 종료할 수 있습니다.
결론
Axios로 API 요청을 취소하는 기술을 마스터하면 애플리케이션의 성능과 신뢰성을 크게 향상시킬 수 있습니다. 우리가 본 바와 같이, Axios는 필요할 때 요청을 중단하는 간단하고 효과적인 방법을 제공합니다. 이 지식을 실천에 옮기고 API 테스트 프로세스를 간소화하려면 Apidog를 다운로드하는 것을 잊지 마세요. 이 도구는 개발 도구 키트에서 강력한 동맹이며 비용이 들지 않습니다. Axios와 Apidog의 힘을 받아들이고 API 관리를 한 단계 더 발전시키세요!
