O novo AbortController e AbortSignal APIs tornaram o cancelamento de fetch muito mais limpo. Para aprender um método mais moderno de cancelar uma solicitação de fetch leia buscar com tempo limite!

O fetch API começou como alvo de críticas devido à falta de tempo limite e cancelamento de solicitações. Embora essas críticas possam ser consideradas justas ou não, o senhor não pode negar que a API fetch tem sido incrível. Como sempre fizemos, se um recurso estiver faltando, sempre podemos incorporá-lo.

Recentemente, estive pensando em incluir um timeout de fetch e encontrei um bom script de fetch / timeout aqui. Eu o modifiquei ligeiramente para evitar que o fetch da chamada then e catch não realizam suas tarefas porque acredito que o tempo limite deve ser tratado pelo Promise do shim:

const FETCH_TIMEOUT = 5000;
let didTimeOut = false;

new Promise(function(resolve, reject) {
    const timeout = setTimeout(function() {
        didTimeOut = true;
        reject(new Error('Request timed out'));
    }, FETCH_TIMEOUT);
    
    fetch('https://davidwalsh.name/?xx1')
    .then(function(response) {
        // Clear the timeout as cleanup
        clearTimeout(timeout);
        if(!didTimeOut) {
            console.log('fetch good! ', response);
            resolve(response);
        }
    })
    .catch(function(err) {
        console.log('fetch failed! ', err);
        
        // Rejection already happened with setTimeout
        if(didTimeOut) return;
        // Reject with error
        reject(err);
    });
})
.then(function() {
    // Request success and no timeout
    console.log('good promise, no timeout! ');
})
.catch(function(err) {
    // Error: response error, request timeout or runtime error
    console.log('promise error! ', err);
});

Envolvendo esse código em uma função chamada fetchWithTimeout, por meio da qual o senhor passa um tempo limite e busca o URL/configurações, funcionaria bem; como as pessoas gostam de usar o fetch de várias maneiras, optei por não criar uma função generalizada e, em vez disso, estou apenas fornecendo a lógica básica.

Muitos argumentariam que o tempo limite deveria vir do servidor, mas todos sabemos que nós, desenvolvedores de front-end, nem sempre temos controle sobre os dois lados de uma solicitação. Se o senhor estiver procurando por um snippet de tempo limite de solicitação de busca, aqui está!

  • Da webcam ao GIF animado: o segredo por trás do chat.meatspac.es!
  • 6 coisas que o senhor não sabia sobre o Firefox OS

    Firefox OS está em todas as notícias de tecnologia e por um bom motivo: A Mozilla finalmente deu aos desenvolvedores da Web a plataforma de que precisam para criar aplicativos da maneira como os criam há anos: com CSS, HTML e JavaScript. O Firefox OS tem se aprimorado rapidamente…