有没有办法知道链接/脚本是否仍然挂起或失败

Is there a way to know if a link/script is still pending or has it failed

本文关键字：是否 挂起 失败 脚本 链接 有没有      更新时间：2023-09-26

我想从下面的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>

换句话说：是否有一个接口提供类似于Bluebird的isPending()、isResolved()、isRejected()方法或常规ES6-Promise的东西？

额外的问题：这是使用服务人员可以实现的吗？

由于SW可以拦截请求并知道它们的状态，我想知道我是否可以实现一个API，它返回一个承诺

  • 如果请求仍处于挂起状态，则为挂起状态
  • 如果触发load事件，则解决
  • 如果CCD_ 9或CCD_

感谢的帮助

更新&解决方案：

多亏了@pritishvaidya和@guest271314的回答，我能够使用MutationObserver提出一个可行的解决方案，该解决方案包括查看DOM以添加资源节点(链接、img、脚本(，并为其添加一个承诺，该承诺将按照上述解决

这非常有效，只需注意脚本标记需要在<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});

一旦观察者就位，任何有效的资源元素都应该有一个statuspromise属性，您可以在任何时间点检查

document.querySelector('link').status.then(linkLoaded).catch(linkFailed)

ServiceWorker应该可以提供一个更优雅的解决方案，不需要使用昂贵的querySelectorAll，因为它可以被编程为拦截和跟踪所有资源请求及其状态

可以使用<link>元素的onload、onerror事件；请参阅右栏的浏览器CSS/JS加载功能。

创建一个对象来存储与<link>元素对应的所有<link>请求和已解决或已拒绝的Promise的状态。

在onerror事件中拒绝Promise；使用链接到Promise.reject()的.catch()来处理错误，这样Promise.all()就不会停止处理作为参数传递的数组中已解析的promise。如果任何被拒绝的Promise应停止处理promise数组中已解决的promise，您也可以从onerror处理程序的.catch()到Promise.all()的throw错误。

在window.onload事件处理程序中，使用Promise.all()处理所有已解析的链接，使用在window.onload事件之前调用的相同函数。要等待Promise.all()的结果可用，请在链接到Promise.all() 的.then()处将最后一个<script>元素的src设置为bundle.js

<!DOCTYPE html>
<html>
<head>
  <title>App</title>
  <meta charset="utf-8">
  <script>
    var handleLinks = {
      links: [],
      isPending: true
    };
    function handleBeforeLoad() {
      if (document.querySelectorAll("link").length === 0) {   
        console.log("links loading state is pending..", handleLinks.isPending);
      } else {
        handleLinks.isPending = false;
        Promise.all(handleLinks.links)
          .then(function(linksContent) {
            console.log("links resolved:", linksContent
                       , "links loading state is pending.."
                       , handleLinks.isPending);
            linksContent.filter(Boolean).forEach(function(link) {
              // `content` property : html `document`,  `CSSStyleSheet` 
              // requested at `<link>` element
              console.log(link); 
            });
            // load `bundle.js`
            document.getElementById("bundle")
            .src = "bundle.js"
          })
          .catch(function(err) {
            console.log("link error:", err.message)
          })
      }
    }
    handleBeforeLoad();
    window.onload = handleBeforeLoad;
    function handleLink(el) {
      handleLinks.links.push(Promise.resolve({
        content: el.import || el.sheet,
        type: el.type,
        rel: el.rel,
        href: el.href,
        integrity: el.integrity,
        isResolved: true
      }));
    }
    function handleLinkError(el) {
      handleLinks.links.push(Promise.reject(new Error(JSON.stringify({
        error: "error loading link",
        type: el.type,
        rel: el.rel,
        href: el.href,
        integrity: el.integrity,
        isRejected: true
      }))).catch(function(err) {
        // handle error
        console.log(err);
        // this will return a resolved Promise
        return "error requesting link " + el.href;
        // `throw err` here if any rejected Promise should
        // stop `Promise.all()` from handling resolved Promise
      }));
    }
  </script>
  <link onload="handleLink(this)" 
        onerror="handleLinkError(this)" 
        rel="import" 
        href="template-bundle.html" 
        type="text/html">
  <link onload="handleLink(this)" 
        onerror="handleLinkError(this)" 
        rel="stylesheet" 
        href="bundle.css" 
        type="text/css">
  <!-- this should throw error, file does not exist -->
  <link onload="handleLink(this)" 
        onerror="handleLinkError(this)" 
        rel="stylesheet" 
        href="bundles.css" 
        type="text/css">
  <body>
    <header><img src="" alt="App logo"></header>
    <!-- Boilerplate... -->
    <script id="bundle"></script>
  </body>
</html>

plnkrhttp://plnkr.co/edit/DQj9yTDcoQJj3h7rGp95?p=preview

是的，您可以在开发人员工具中进行检查。右键单击网页并选择检查，然后窗口将打开选择网络选项，您可以在那里检查状态。

相关文章：