비동기 통신 취소하기(feat. AbortController)
상황 설명
Example 1. 메뉴바를 누르는 유저
메뉴 바 ( 홈, 상세보기, Best상품)
1) 홈 -> 메인 화면 물품 리스트 가져오기 API 호출
2) 상세보기 -> 특정 리스트 정보 가져오기 API 호출
3) Best 상품 -> Best 상품 리스트 가져오기 API 호출
<사용자 시나리오>
-
사용자가 API 호출을 완료해서 화면이 전환되기 전에 메뉴 탭을 번갈아 클릭한다.
-
Front
1) API 호출 결과 중 가장 최신의 값만 사용한다.
2) 다른 메뉴가 클릭 되지 않도록 touch-action: none, pointer-events: none과 같은 css값을 사용한다.
3)AbortController
을 사용한다.
오늘은 마지막 방법인 AbortController를 알아보려고 한다.
이는 네트워크 요청을 취소할 수 있는 인터페이스이다.
(nodeJS에서는 사용이 불가능함 _ polyfill로 이용)
AbortController 살펴보기
abortSignal
- 읽기 전용, 네트워크 요청 시 같이 담아 보내면 취소 하는 역할을 할 수 있음.
abort
- 비동기 요청이 완료 되기 전 비동기 요청을 취소할 수 있는 메서드
AbortController 예시
- 테스트를 위해 NetWork 상태를 느리게 설정하였다.
- 버튼을 누르면 해당 API가 호출된다. 그런데, 호출이 완료되기 전에 다른 버튼을 마구 눌러보자
1) 1번 API 호출
2) 1번이 완료되기 전에 2번 클릭
3) 1번 API 호출이 취소되고 2번 API 호출
4) 2번이 완료되기 전에 다시 1번 클릭
5) 2번 API 호출이 취소되고 1번 API 호출
- 결과: 1번, 2번, 1번 이렇게 총 3번의 API 호출이 있었지만, 최종 1번 API만 호출되어 결과가 나온다.
const Request = () => {
let isFetch = false;
let abortController = null;
function init() {
if (isFetch) abortController.abort();
abortController = new AbortController();
isFetch = true;
}
function finish() {
abortController = null;
isFetch = false;
}
return async function (url) {
try {
init();
const response = await fetch(url, { signal: abortController.signal });
const result = response.json();
finish();
return result;
} catch (e) {
const { name, status, message } = e;
if (name === "AbortError") {
console.log("Abort Controller의 취소");
}
throw { status, message };
}
};
};
const Fetch = Request();
const callAPI = async (url) => {
try {
const res = await Fetch(url);
console.log(res);
} catch (e) {
console.log(e);
}
};
const API ="https://jsonplaceholder.typicode.com/posts";
const $btnList = Array.from(document.getElementsByClassName('button'));
$btnList.forEach(($el, i) => {
$el.addEventListener('click', async () => {
await callAPI(`${API}/${i+1}`);
})
})
참고) Axios
const axiosCancleToken = axios.CancelToken;
const source = axiosCancleToken.source();
....
axios.get(url, { cancleToken: source.token });
....
// 취소 요청
source.cancle();
참고블로그
https://developer.mozilla.org/ko/docs/Web/API/AbortController
Author And Source
이 문제에 관하여(비동기 통신 취소하기(feat. AbortController)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@maru5mango/비동기-통신-취소하기feat.-AbortController저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)