AbortController
- 하나 이상의 웹 요청을 중단할 수 있는 Interface
ex) 페이지네이션 구현 시 1,2,3..이렇게 유저가 빨리 페이지를 넘기는데 결국 페이지 별 요청을 한다면 원하는 요청은 마지막으로 클릭한 페이지에 대한 요청이라 앞선 요청은 필요없다
API
1) new AbortController
- AbortController 인터페이스 생성(웹 요청 중단 가능)
const abortController = new AbortController();
2) AbortController.signal
- AbortSignal 객체 인터페이스 반환(요청 취소 가능)
const abortController = new AbortController();
const signal = abortController.signal;
const res = await fetch(url, {signal});
- 요청 API에 반환받은 AbortSignal 객체를 전달하면 요청을 취소할 수 있는 상태가 된다
3) AbortController.abort()
- signal이 할당된 웹 요청을 취소할 수 있다
4) abortSignal.aborted
- aborted 여부에 따라 true, false를 반환한다
React에서 useEffect hook과 함께 사용하기
useEffect(()=>{
const abortController = new AbortController();
const signal = abortController.signal;
const res = await fetch(url, {signal});
if(signal.aborted) return;
return () => {
abortController.abort();
}
},[value])
- AbortController 인터페이스 생성
- AbortSignal 객체 생성하고 객체를 요청 API의 인자로 전달해 해당 요청을 취소할 수 있는 상태로 만들기
- 전달한 signal을 통해 aborted가 true일 경우 밑의 함수처리는 하지않고 return
- 의존성배열에 있는 value가 바뀌면 useEffect 내부에 처리중이던것은 종료되고 unmount될때 abort를 실행시켜 위에서 선언한 signal이 할당된 요청이 취소된다