javascript - 使用 fetch API 时在 AJAX 调用期间显示微调器

Question

在我的项目中，我正在迁移到 React，因此不加载 JQuery。因为我不再使用 JQuery，所以对于 AJAX 调用，我使用的是 fetch。使用 JQuery，我可以 Hook AJAX 调用的开始和结束，因此很容易将光标更改为微调器。我在 fetch 中找不到类似的钩子(Hook)。除了在每个单独的 AJAX 调用中更改它之外，还有其他方法可以做到这一点吗？

大量的谷歌搜索一直在寻找关于...JQuery 的答案。

Answer 1

好了，我认为代码是不言自明的:

// Store a copy of the fetch function
var _oldFetch = fetch; 

// Create our new version of the fetch function
window.fetch = function(){

    // Create hooks
    var fetchStart = new Event( 'fetchStart', { 'view': document, 'bubbles': true, 'cancelable': false } );
    var fetchEnd = new Event( 'fetchEnd', { 'view': document, 'bubbles': true, 'cancelable': false } );

    // Pass the supplied arguments to the real fetch function
    var fetchCall = _oldFetch.apply(this, arguments);

    // Trigger the fetchStart event
    document.dispatchEvent(fetchStart);

    fetchCall.then(function(){
        // Trigger the fetchEnd event
        document.dispatchEvent(fetchEnd);
    }).catch(function(){
        // Trigger the fetchEnd event
        document.dispatchEvent(fetchEnd);
    });

    return fetchCall;
};

document.addEventListener('fetchStart', function() {
    console.log("Show spinner");
});

document.addEventListener('fetchEnd', function() {
    console.log("Hide spinner");
});

这是一个活生生的例子:https://jsfiddle.net/4fxfcp7g/4/