API 요청 취소시키는 방법
일반적으로는 아래와 같이 axios config에 timout만 넣어주면 설정해둔 시간을 초과하면 자동으로 취소시킬 수 있습니다.
const testApi = async (jsonData) => {
try {
const res = axios.get('/api/data', { timeout: 5000 })
status = res.status;
} catch (error) {
console.error("데이터 불러오기 에러 - ", err);
status = 500;
}
return status;
};
또 api 요청을 취소시키는 방법으로 CancelToken을 많이 이용해왔습니다.
const testApi = async (jsonData) => {
try {
const cancelToken = axios.CancelToken;
const source = cancelToken.source();
const res = axios.get('/api/data', { timeout: 5000, cancelToken: source.token })
// 요청 취소
source.cancel('사용자가 요청을 취소했습니다.');
status = res.status;
} catch (error) {
console.error("데이터 불러오기 에러 - ", err);
status = 500;
}
return status;
};
그러나 현재는 CancelToken은 deprecated된 상태라 더이상 사용하지 않는 것이 좋습니다.
황당하게도 공식문서에서 한국어를 선택해서 보면 해당 내용은 나오지 않고 english로 바꾸어야 확인이 가능합니다.
또 오늘 소개드릴 signal또한 영어 문서에서만 나옵니다.
axios는 다른 언어는 업데이트가 느리기 때문에 웬만하면 영어버전으로 보시길 추천드립니다.
timeout만으로 충분할 수 있지만 저는 IoT프로젝트를 하면서 기계와 통신을 했었는데 post요청후에 기계가 뻗으면서
응답도 주지 않고 timeout 시간이 지나도 취소가 되지않는 현상이 발생했었습니다.
이를 해결하고자 공식문서를 찾아보다가 signal을 이용한 방법을 알게되어 적용하여 해결되었습니다.
signal이란?
axios v0.22.0 버전부터 지원하는 기능입니다.
javascript의 AbortController 방식으로 요청을 취소할 수 있습니다.
사용 예시는 아래와 같습니다.
const TIMEOUT = 10000;
const timeoutSignal = (timeoutMs) => {
const abortController = new AbortController();
setTimeout(() => abortController.abort(), timeoutMs || 0);
return abortController.signal;
};
const testApi = async (jsonData) => {
try {
const jsonToString = JSON.stringify(jsonData);
const config = {
headers: {
"Content-Type": "application/json",
},
signal: timeoutSignal(TIMEOUT),
};
const res = await HUBMINI.post(
`/upload/jsonData.json`,
jsonToString,
config,
);
status = res.status;
} catch (error) {
console.error("Json 설정 에러 - ", err);
status = 500;
}
return status;
};
이 방법을 이용하면 서버에 문제가 생겨 응답을 주지 못하는 경우라도 감지하여 요청을 중단시킬 수 있습니다.