Respostas:
fetch
agora suporta um signal
parâmetro a partir de 20 de setembro de 2017, mas nem todos os navegadores parecem suportar isso no momento .
ATUALIZAÇÃO 2020: A maioria dos principais navegadores (Edge, Firefox, Chrome, Safari, Opera e alguns outros) suportam o recurso , que se tornou parte do padrão de vida do DOM . (a partir de 5 de março de 2020)
Essa é uma mudança que veremos em breve, portanto, você poderá cancelar uma solicitação usando um AbortController
sAbortSignal
.
O modo como funciona é o seguinte:
Etapa 1 : você cria um AbortController
(por enquanto eu apenas usei isso )
const controller = new AbortController()
Etapa 2 : você recebe o AbortController
sinal s assim:
const signal = controller.signal
Etapa 3 : você passa a signal
buscar assim:
fetch(urlToFetch, {
method: 'get',
signal: signal, // <------ This is our AbortSignal
})
Etapa 4 : basta abortar sempre que precisar:
controller.abort();
Aqui está um exemplo de como isso funcionaria (funciona no Firefox 57+):
<script>
// Create an instance.
const controller = new AbortController()
const signal = controller.signal
/*
// Register a listenr.
signal.addEventListener("abort", () => {
console.log("aborted!")
})
*/
function beginFetching() {
console.log('Now fetching');
var urlToFetch = "https://httpbin.org/delay/3";
fetch(urlToFetch, {
method: 'get',
signal: signal,
})
.then(function(response) {
console.log(`Fetch complete. (Not aborted)`);
}).catch(function(err) {
console.error(` Err: ${err}`);
});
}
function abortFetching() {
console.log('Now aborting');
// Abort.
controller.abort()
}
</script>
<h1>Example of fetch abort</h1>
<hr>
<button onclick="beginFetching();">
Begin
</button>
<button onclick="abortFetching();">
Abort
</button>
AbortController is not defined
. De qualquer forma esta é apenas uma prova de conceito, pelo menos as pessoas com Firefox 57+ pode vê-lo trabalhando
https://developers.google.com/web/updates/2017/09/abortable-fetch
https://dom.spec.whatwg.org/#aborting-ongoing-activities
// setup AbortController
const controller = new AbortController();
// signal to pass to fetch
const signal = controller.signal;
// fetch as usual
fetch(url, { signal }).then(response => {
...
}).catch(e => {
// catch the abort if you like
if (e.name === 'AbortError') {
...
}
});
// when you want to abort
controller.abort();
funciona na borda 16 (2017-10-17), firefox 57 (2017-11-14), safari de desktop 11.1 (2018-03-29), ios safari 11.4 (2018-03-29), chrome 67 (2018-05 -29) e mais tarde.
em navegadores mais antigos, você pode usar o polyfill whatwg-fetch do github e o polyfill AbortController . você pode detectar navegadores mais antigos e usar os polyfills condicionalmente também:
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
import {fetch} from 'whatwg-fetch'
// use native browser implementation if it supports aborting
const abortableFetch = ('signal' in new Request('')) ? window.fetch : fetch
A partir de fevereiro de 2018, fetch()
pode ser cancelado com o código abaixo no Chrome (leia Usando fluxos legíveis para ativar o suporte ao Firefox). Nenhum erro é gerado para catch()
ser atendido, e esta é uma solução temporária até que AbortController
seja totalmente adotada.
fetch('YOUR_CUSTOM_URL')
.then(response => {
if (!response.body) {
console.warn("ReadableStream is not yet supported in this browser. See https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream")
return response;
}
// get reference to ReadableStream so we can cancel/abort this fetch request.
const responseReader = response.body.getReader();
startAbortSimulation(responseReader);
// Return a new Response object that implements a custom reader.
return new Response(new ReadableStream(new ReadableStreamConfig(responseReader)));
})
.then(response => response.blob())
.then(data => console.log('Download ended. Bytes downloaded:', data.size))
.catch(error => console.error('Error during fetch()', error))
// Here's an example of how to abort request once fetch() starts
function startAbortSimulation(responseReader) {
// abort fetch() after 50ms
setTimeout(function() {
console.log('aborting fetch()...');
responseReader.cancel()
.then(function() {
console.log('fetch() aborted');
})
},50)
}
// ReadableStream constructor requires custom implementation of start() method
function ReadableStreamConfig(reader) {
return {
start(controller) {
read();
function read() {
reader.read().then(({done,value}) => {
if (done) {
controller.close();
return;
}
controller.enqueue(value);
read();
})
}
}
}
}
Por enquanto, não há solução adequada, como diz o @spro.
No entanto, se você tiver uma resposta a bordo e estiver usando o ReadableStream, poderá fechar o fluxo para cancelar a solicitação.
fetch('http://example.com').then((res) => {
const reader = res.body.getReader();
/*
* Your code for reading streams goes here
*/
// To abort/cancel HTTP request...
reader.cancel();
});
Vamos polyfill:
if(!AbortController){
class AbortController {
constructor() {
this.aborted = false;
this.signal = this.signal.bind(this);
}
signal(abortFn, scope) {
if (this.aborted) {
abortFn.apply(scope, { name: 'AbortError' });
this.aborted = false;
} else {
this.abortFn = abortFn.bind(scope);
}
}
abort() {
if (this.abortFn) {
this.abortFn({ reason: 'canceled' });
this.aborted = false;
} else {
this.aborted = true;
}
}
}
const originalFetch = window.fetch;
const customFetch = (url, options) => {
const { signal } = options || {};
return new Promise((resolve, reject) => {
if (signal) {
signal(reject, this);
}
originalFetch(url, options)
.then(resolve)
.catch(reject);
});
};
window.fetch = customFetch;
}
Por favor, tenha em mente que o código não foi testado! Deixe-me saber se você o testou e algo não funcionou. Pode avisar que você tenta sobrescrever a função 'buscar' da biblioteca oficial do JavaScript.