js fetch 요청 취소, 중단하기

example.js

let controller;

const fetchData = async (pram) => {
  try {
    console.log(`fetchData`);
    if (controller) controller.abort();
    controller = new AbortController();
    const { signal } = controller;

    const res = await fetch(`${API_END_POINT}/${pram}`, { signal });

    if (!res.ok) {
      throw new Error('no ok error');
    }

    return await res.json();
  } catch (error) {
    throw new Error('server error');
  }
};

• AbortController를 사용해서 기존에 요청이 있으면
• 취소하고 새로운 요청을 보내는 예제이다

• 버튼을 눌러서 fetchData를 실행시킨다고 하자
• 유저가 빠르게 버튼 10번을 눌러서 fetchData가 10번 실행되었다
• 이런 입력에 대한 아무런 방지를 않았으면, fetch 결과에 대한 콜백이 10번 실행될 것이다
• AbortController을 사용하면 버튼을 연속적으로 누르더라도 콜백이 마지막 결과에 대해서만 한번 동작할 것이다
• 하지만 AbortController를 사용한다고 해서 API를 콜하는 비용이 덜 드는 것은 아니다
• 단순히 해당 fetch에 대한 결과를 핸들하지 않겠다는 것이기 때문에,
• 지금의 예처럼 동일한 API를 중복해서 호출하는 것을 막기 위해서는
• 최초에 버튼을 누르면 버튼을 비활성화하는 것이 좋다

참고

• https://developer.mozilla.org/ko/docs/Web/API/AbortController/abort