Получить событие в документе
Я не могу найти способ глобально отслеживать события выборки в документе.
В 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()
}
.....
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы легко можете его вернуть:
const myFetch = (...args) => {
loading.show();
return fetch(...args)
.then(result => {
loading.hide();
return result;
})
.catch(error => {
loading.hide();
throw error;
});
};
Затем позвоните в myFetch вместо прямого звонка в fetch.
Или, если вы можете предположить, что finally существует на вашей платформе (или заполните его полифилом):
const myFetch = (...args) => {
loading.show();
return fetch(...args).finally(() => { loading.hide(); });
};
Обратите внимание, что Функция finally будет завершен в спецификации ES2018.
Вы даже можете обернуть fetch, если хотите, но я не рекомендую это делать:
var originalFetch = fetch;
fetch = /*...one of the above, but using `originalFetch` instead of `fetch`...*/
Ваш код не использует никаких функций ES2015 +, поэтому эти блоки кода в ES5:
function myFetch() {
loading.show();
return fetch.apply(null, arguments)
.then(function(result) {
loading.hide();
return result;
})
.catch(function(error) {
loading.hide();
throw error;
});
}
или же
function myFetch() {
loading.show();
return fetch.apply(null, arguments).finally(function() { loading.hide(); });
}
@VladimirMedinsky: Я не вижу ни одного в спецификации: fetch.spec.whatwg.org/#fetch-method Это похоже на XMLHttpRequest, который также не предлагает никаких глобальных событий. Дополнительные функции jQuery являются дополнительными функциями. :-)
большое спасибо! Я понял! Выберите первый вариант. Это работает, но у меня также есть вопрос, действительно ли в документе нет какого-либо события для отслеживания выборки, как это делает jquery со своими запросами ajax?