js fetch 요청 취소, 중단하기

example.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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를 중복해서 호출하는 것을 막기 위해서는
  • 최초에 버튼을 누르면 버튼을 비활성화하는 것이 좋다

참고

js fetch 요청 취소, 중단하기

https://chinsun9.github.io/2021/07/18/cancel-fetch/

Author

chinsung

Posted on

2021-07-18

Updated on

2021-07-18

Licensed under

댓글