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.

js
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