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();    // 1.
  const signal = abortController.signal; 			// 2.
  
  const res = await fetch(url, {signal}); 			
  if(signal.aborted) return;						// 3.
  
  // res값 setState 하는 등의 처리들
  
  return () => {
  	abortController.abort();						// 4.
  }
},[value])

1. AbortController 인터페이스 생성
2. AbortSignal 객체 생성하고 객체를 요청 API의 인자로 전달해 해당 요청을 취소할 수 있는 상태로 만들기
3. 전달한 signal을 통해 aborted가 true일 경우 밑의 함수처리는 하지않고 return
4. 의존성배열에 있는 value가 바뀌면 useEffect 내부에 처리중이던것은 종료되고 unmount될때 abort를 실행시켜 위에서 선언한 signal이 할당된 요청이 취소된다