Есть ли способ узнать, находится ли ссылка / сценарий в ожидании или он не прошел?
Я хотел бы знать из HTML ниже, еслиlink[rel=import], link[rel=stylesheet], img а такжеscript являютсяв ожидании / загружено / не удалось / прекращены без необходимости добавлять слушателей заранее и в любой момент после того, как событие произошло
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="utf-8">
<link rel="import" href="template-bundle.html">
<link rel="stylesheet" href="bundle.css">
</head>
<body>
<header><img src="logo.png" alt="App logo"></header>
<!-- Boilerplate... -->
<script src="./app-bundle.js"></script>
</body>
</html>
Другими словами: есть ли интерфейс, который обеспечивает что-то похожее на BluebirdisPending(), isResolved(), isRejected() методы или обычный ES6 Promise?
Дополнительный вопрос: можно ли этого достичь с помощью Service Worker?
Поскольку SW может перехватывать запросы и знать их статус, мне было интересно, смогу ли я реализовать API, который возвращает обещание, которое
ожидает рассмотрения, если запрос все еще находится на рассмотренииразрешается, еслиload событие уволеноотклонено, еслиerror или жеaborted был уволен.Спасибо за помощь
Обновление и решение:
Благодаря ответам @pritishvaidya и @ guest271314 я смог найти жизнеспособное решение, используяMutationObserver это включает наблюдение за DOM для добавления узлов ресурсов (link, img, script) и добавление к ним обещания, которое разрешится, как описано выше
Это прекрасно работает, с единственным кавиатом, в который нужно вставить тег script<head> перед любым другим ресурсом.Вот пример
var resourceNodeSelector = 'link[href],script[src],img[src]';
function watchResource (n) {
var url = n.href || n.src;
if (!n.matches || !n.matches(resourceNodeSelector)) {
return;
}
if (n.status) {
return;
}
n.status = resourceObserver.promises[url] = new Promise(function (resolve, reject) {
n.addEventListener('load', resolve);
n.addEventListener('error', reject);
n.addEventListener('abort', reject);
n.addEventListener('unload', function (l) { delete resourceObserver.promises[url]} );
});
n.status.catch(function noop () {}); //catch reject so that it doesn't cause an exception
}
var resourceObserver = new MutationObserver(function (mutations) {
document.querySelectorAll(resourceNodeSelector).forEach(watchResource);
});
resourceObserver.promises = {};
resourceObserver.observe(window.document, {childList: true, subtree: true});
Как только наблюдатель будет на месте, любой действительный элемент ресурса должен иметьstatus обещать недвижимость, которую вы можете проверить в любой момент времени
document.querySelector('link').status.then(linkLoaded).catch(linkFailed)
Более элегантное решение, которое не предполагает использования дорогихquerySelectorAll, должно быть возможно с ServiceWorker, так как он может быть запрограммирован на перехват и отслеживание всех запросов ресурсов и их состояния