Obtenir l'événement sur le document

Question

Je ne trouve pas le moyen de surveiller les événements fetch globalement sur le document.

Avec jQuery, c'était simple:

var loading = $('#loading'); //ma barre de progression
$(document).bind("ajaxSend", function() {
    loading.show();
}).bind("ajaxComplete", function() {
    loading.hide();
}).bind("ajaxSuccess", function() {
    loading.hide();
}).bind("ajaxError", function() {
    loading.hide();
});

Mais quand j'ai commencé à utiliser l'API fetch, j'ai perdu cette fonctionnalité.

À quel événement dois-je écouter pour afficher la barre de chargement avant le fetch et la masquer après le fetch? De plus, je veux le faire globalement sur le document. Je NE veux pas l'écrire comme suit:

loading.show();
fetch('...')
   .then(response => response.json())
   .then(answer => { 
        loading.hide()
   }
.....

Answer 1

Vous pouvez facilement le récupérer :

const myFetch = (...args) => {
    loading.show();
    return fetch(...args)
        .then(result => {
            loading.hide();
            return result;
        })
        .catch(error => {
            loading.hide();
            throw error;
        });
};

Ensuite, appelez myFetch au lieu d'appeler directement fetch.

Ou si vous pouvez supposer que finally existe sur votre plate-forme (ou le polyfiller) :

const myFetch = (...args) => {
    loading.show();
    return fetch(...args).finally(() => { loading.hide(); });
};

Notez que la fonctionnalité finally est complète et sera présente dans la spécification ES2018.

Vous pouvez même envelopper fetch si vous le souhaitez, mais je ne le recommande pas :

var originalFetch = fetch;
fetch = /*...l'une des options ci-dessus, mais en utilisant `originalFetch` au lieu de `fetch`...*/

---

Votre code n'utilise pas de fonctionnalités ES2015+, il s'agit donc de blocs de code en ES5 :

function myFetch() {
    loading.show();
    return fetch.apply(null, arguments)
        .then(function(result) {
            loading.hide();
            return result;
        })
        .catch(function(error) {
            loading.hide();
            throw error;
        });
}

ou

function myFetch() {
    loading.show();
    return fetch.apply(null, arguments).finally(function() { loading.hide(); });
}