AbortController.signal
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.
Experimental: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.
AbortController
인터페이스의 signal
읽기 전용 프로퍼티는 DOM 요청과 통신하거나 취소하는데 사용하는 AbortSignal
객체 인터페이스를 반환한다.
구문
var signal = abortController.signal;
값
AbortSignal
객체 인터페이스.
예제
다음 스니펫에서는 Fetch API를 사용해 비디오를 다운로드하는 것을 목표로 한다.
먼저 AbortController()
생성자를 사용해 컨트롤러를 AbortController.signal
프로퍼티를 사용해 AbortSignal
객체와 관계된 참조를 얻는다.
Fetch 요청을 시작할 때, 요청의 옵션 객체 내부에 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-signal② |
브라우저 호환성
BCD tables only load in the browser