Question

我找不到在文档上全局监视抓取事件的方法。

在jQuery中很简单：

var loading = $('#loading'); //my progress bar
$(document).bind("ajaxSend", function() {
    loading.show();
}).bind("ajaxComplete", function() {
    loading.hide();
}).bind("ajaxSuccess", function() {
    loading.hide();
}).bind("ajaxError", function() {
    loading.hide();
});

但是当我开始使用fetch API时，我失去了这个功能。

为了在获取之前显示加载栏并在获取后隐藏它，我必须听哪个事件？另外，我想在文档上全局执行此操作。我不想写它：

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

Answer 1

你可以随时取回它：

URL resource = getClass().getResource("music.mp3");
     MediaPlayer a = new MediaPlayer(new Media(resource.toString()));
     a.setOnEndOfMedia(new Runnable() {
           public void run() {
             a.seek(Duration.ZERO);
           }
       });
      a.play();

然后致电const myFetch = (...args) => { loading.show(); return fetch(...args) .then(result => { loading.hide(); return result; }) .catch(error => { loading.hide(); throw error; }); };，而不是直接致电myFetch。

或者，如果您可以假设您的平台上存在fetch（或填充它）：

finally

请注意，finally feature已完成，将在ES2018规范中。

如果你愿意，你甚至可以包裹const myFetch = (...args) => { loading.show(); return fetch(...args).finally(() => { loading.hide(); }); };，但我不推荐它：

fetch

您的代码没有使用任何ES2015 +功能，因此ES5中的代码块：

var originalFetch = fetch;
fetch = /*...one of the above, but using `originalFetch` instead of `fetch`...*/

或

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

在文档上获取事件

1 个答案: