HTTP 요청을 취소하는 경우
1. 사용자의 요청 취소
사용가 웹 페이지에서 요청을 시작했지만, 해당 요청이 더 이상 필요하지 않거나 취소해야 할 경우가 있다.
예를 들어서 검색 요청을 시작했지만 검색어를 변경하거나 다른 작업을 수행하려고 할 때 해당 요청을 취소할 수 있다.
2. 네트워크 지연으로 인한 취소 요청
사용자의 요청에 대한 응답이 오랜 시간 동안 지연되는 경우, 사용자가 경험을 향상시키기 위해 해당 요청을 취소할 수 있다.
사용자는 불필요한 대기 시간을 피하고 빠른 응답을 받을 수 있다.
3. 페이지 이동으로 인한 요청 취소
페이지가 이동되거나 컴포넌트가 unmount되는 등의 상황에서 해당 페이지 또는 컴포넌트와 관련된 요청을 취소할 수 있다.
이렇게 하면 불필요한 요청을 줄이고 리소스 절약을 할 수 있다.
4. 여러 요청 중 마지막 요청만 유효한 경우
여러 개의 연속적인 요청을 보낼 때, 마지막 요청만 유효하거나 의미 있는 데이터를 반환하는 경우가 있을 수 있다.
이런 경우 이전 요청들을 취소하여 불필요한 작업을 줄 일 수 있다.
5. 빠른 사용자 상호작용을 위한 요청 취소
사용자의 상호작용에 빠르게 응답하기 위해, 예를 들어 자동완성 기능 등에서 사용자가 타이핑하는 동안 요청을 계속 보내고, 이전 요청이 아직 완료되지 않았을 경우 해당 요청을 취소하여 더 최신의 검색 결과를 제공할 수 있다.
axios로 요청 취소하기
const axios = require('axios');
const source = axios.CancelToken.source();
axios.get('https://api.example.com/data', {
cancelToken: source.token
})
.then(response => {
console.log('응답 데이터:', response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('요청이 취소되었습니다.', error.message);
} else {
console.error('오류 발생:', error.message);
}
});
// 요청 취소 예제
setTimeout(() => {
source.cancel('사용자가 요청을 취소했습니다.');
}, 2000);axios.CancelToken.source() 메서드를 사용해 취소 토큰을 생성하고, 요청 객체의 cancelToken 속성으로 전달하면 된다.
요청을 취소하려면 cancel() 메서드를 취소 토큰 객체에 호출하면 된다.
취소 할 때, 오류 객체에 axios.isCancle(error)를 사용하면 취소된 요청인지 확인할 수 있다.
fetch로 취소 요청하기
const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
.then(response => {
if (!response.ok) {
throw new Error('네트워크 오류');
}
return response.json();
})
.then(data => {
console.log('응답 데이터:', data);
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('요청이 취소되었습니다.', error.message);
} else {
console.error('오류 발생:', error.message);
}
});
// 요청 취소 예제
setTimeout(() => {
controller.abort();
}, 2000);AbortController와 해당 컴포넌트의 signal 속성을 사용해 요청 취소를 하면 된다.
abort()메서드를 호출하여 요청 취소를 할 수 있다.
취소할 때 오류 객체의 name 속성을 확인해 AbortError가 발생했는지 확인한다.
