AbortSignal
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: Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.
A interface AbortSignal
representa o sinal de um objeto que permite a você se comunicar com uma Requisição de DOM (como Fetch) e aborta-la se necessário via um objeto AbortController
Propriedades
A interface AbortSignal também herda propriedades de sua interface pai, EventTarget
.
AbortSignal.aborted
Somente leitura-
Um
Boolean
que indica quando a(s) Request(s) com a qual o sinal está se comunicando está/estão abortadas(true
) ou não(false
).
Handlers de Eventos
AbortSignal.onabort
-
Invocado quando um
abort
evento dispara, ex: quando as requests do DOM que o sinal estão se comunicando são/estão abortadas.
Métodos
A interface AbortSignal também herda métodos de sua interface pai, EventTarget
.
Exemplos
No exemplo de código a seguir, nós vamos focar em fazer download de um vídeo usando a Fetch API.
Nós primeiro criaremos um controller usando o construtor do AbortController()
, e então pegar a referência de seu objeto AbortSignal
associado usando a propriedade AbortController.signal
.
Quando a requisição Fetch é iniciada, nós passamos o AbortSignal
como uma opção dentro do objeto de opções da request (veja {signal}
, abaixo). Isso associa o sinal e o controller com a requisição fetch e nos permite aborta-la chamando AbortController.abort()
, como visto abaixo no segundo event listener
.
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;
})
}
Nota: Quando abort()
é chamado, a promessa do fetch()
é rejeitada com um AbortError
.
Você pode encontrar um exemplo completo no GitHub — veja abort-api (see it running live also).
Especificações
Specification |
---|
DOM Standard # interface-AbortSignal |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja Também
- Fetch API
- Abortable Fetch by Jake Archibald