비동기 요청 취소하기, 그리고 AbortController

Explanation

한 달에 적어도 한두 개씩은 글 써야지 생각하는데 이미 2월엔 글을 못썼네요.. 요즘 회사 일이 많아서..(는 핑계)
요즘 코로나 때문에 다들 고생이 이만저만이 아닌 거 같아요. 다들 건강 조심하시고, 확진 받으신 분들은 빨리 쾌차하시길 바랄게요.

오늘은 비동기 요청을 취소하는 것에 대해?? 적어보려고 합니다.

1. XMLHttpRequest

음.. XMLHttpRequest는 사실 별로 적을게 없어요. 그냥 abort() 메서드를 지원한답니다.

예제는 깔끔하게 모질라 형 누나들(MDN)의 예제 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/abort
(절대 귀찮아서 예제 복붙한건 안비밀..)

2. jQuery

음.. 사실 jQuery도 별로 적을게 없어요. 버전에 따라 응답 형식이 다르지만, 모든 버전에서 abort() 메서드를 지원합니다.

이번엔 우리의 스택오버플로 형 누나들의 예제. 아래 링크에 보시면 형 누나들 답변들 보면 조금 더 자세한 정보도 알 수 있답니다.
https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery

3. Fetch

사실 여기부터 본론이랍니다.
Fetch는 Promise를 반환하죠. 그런데 Promise는 abort() 메서드가 없답니다. 그리고 TC39에서 Promise Cancelable에 대하여 제안이 있었지만 철회되었답니다.
참고. https://github.com/tc39/proposal-cancelable-promises

약간 주제 외 이야기 일 수도 있지만,
저는 예전에 안희종님의 ECMAScript와 TC39에 대해 적어주신 글을 읽은 적이 있는데, 엄청 좋아서 추천해드려요! 저는 엄청 흥미롭게 읽었어요.
https://ahnheejong.name/articles/ecmascript-tc39/

4. Axios

비동기 통신할때 Axios 라이브러리도 많이 사용하잖아요? Axios는 Promise 기반이지만 Cancel을 지원한답니다. 설명을 읽어보면, 앞서 이야기한 TC39의 취소된 Promise Cancelable 제안을 기초로 하여 제공한다고 해요. 사용은 해봤지만, 어떤 구조로 되어있는진 잘 모르겠어요.(소스를 까보진 않아서…)

역시 예제는 공식 깃헙예제.
https://github.com/axios/axios#cancellation

5. Promise

Fetch는 Promise기반이고 Promise 객체는 resolve, reject 메서드를 지원하니까 reject를 써서 대충, 대략 구현하려고 하면 아래와 같이 할 수 있을 거 같아요.

역시 예제코드 만들기도 쉬운일이 아닙니다..

6. AbortContoroller

그리고 이제는 AbortController를 사용해서 Promise의 abort를 구현할 수 있답니다.
참고. https://dom.spec.whatwg.org/#interface-abortcontroller

위 예제는 https://ko.javascript.info/fetch-abort에서 가져왔습니다. 자세한, 더 많은 예제는 링크를 통해 살펴보시면 좋을 것 같아요.

저는 AbortController를 엄청 최근에서야 알게 되었는데요.(비동기 요청을 취소하는 것에 대해서 생각한 것도 사실 얼마되지 않..) AbortController는 DOM에 정의되어 있는 Interface에요. 예전에 구글 형 누나들에게 검색했을땐 이 정보를 찾지 못했는데, 최근에서야 알게 된게 뭔가 이상해서 한번 DOM 깃헙에 가서 언제 정의 되었는지 찾아봤어요.

https://github.com/whatwg/dom/commit/1c58d2cf4279ade63f1c5c7d200156cfdda89b7c
찾아보니 2017년 7월 14일에 정의되었네요. 헐…
아마도 2017년에 정의되었는데, MDN에서 올해 3월에 깔끔히 정리되서 기재되고 그 후에 검색 엔진에 잡혀서 제가 최근에 알게 되었던 거 같아요.

7. 호환

2017년이면 좀 예전이기도 하지만, 또 어떻게 생각하면 비교적 최근 스팩이기 때문에 fetch 보다도 호환되는 브라우저가 적어요. 사용하신다면 함께 확인해보시는게 좋을 거 같아요.

https://caniuse.com/#search=abortController

물론, 이미 폴리필도 있어요.
https://www.npmjs.com/package/abortcontroller-polyfill

Leave a Reply