AbortController.AbortController()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
AbortController()
생성자는 새로운 AbortController
객체 인터페이스를 생성한다.
구문
var controller = new AbortController();
파라미터
없음.
예제
다음 스니펫에서는 Fetch API를 사용해 비디오를 다운로드하는 것을 목표로 한다.
먼저 AbortController()
생성자를 사용해 컨트롤러를 AbortController.signal
프로퍼티를 사용해 AbortSignal
객체와 관계된 참조를 얻는다.
Fetch 요청 (en-US)을 시작할 때, 요청의 옵션 객체 내부에 AbortSignal
옵션을 전달한다(아래의 {signal}
참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 AbortController.abort()
를 호출하여 이를 취소할 수 있게한다.
var controller = new AbortController();
var signal = controller.signal;
var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');
downloadBtn.addEventListener('click', fetchVideo);
abortBtn.addEventListener('click', function() {
controller.abort();
console.log('Download aborted');
});
function fetchVideo() {
...
fetch(url, {signal}).then(function(response) {
...
}).catch(function(e) {
reports.textContent = 'Download error: ' + e.message;
})
}
참고: abort()
가 호출되면, fetch()
promise는 AbortError
과 함께 reject된다.
동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — abort-api 참고(라이브 실행도 확인할 수 있다).
명세
Specification |
---|
DOM Standard # ref-for-dom-abortcontroller-abortcontroller① |
브라우저 호환성
BCD tables only load in the browser