Nodejs中如何实现浏览器重复尝试加载外部资源文件?

Nodejs中如何实现浏览器重复尝试加载外部资源文件?

<script src=> <link rel=“stylesheet” href=xx.css 经常报如下错误:Failed to load resource: net::ERR_CONNECTION_CLOSED 但是资源是存在的啊,如何编码让浏览器尝试报错后重复加载,直到成功呢?

8 回复

要在Node.js中实现浏览器在遇到网络错误时自动重试加载外部资源，可以通过在客户端JavaScript中使用fetch API并结合retry机制来实现。以下是一个简单的示例，展示了如何实现这一功能。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resource Retry Loader</title>
    <link id="css-resource" rel="stylesheet" href="xx.css">
    <script>
        function retryFetch(url, options = {}, retries = 3, delay = 1000) {
            return fetch(url, options)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response;
                })
                .catch(error => {
                    console.error('Fetch error:', error);
                    if (retries > 0) {
                        console.log(`Retrying in ${delay / 1000} seconds...`);
                        return new Promise(resolve => setTimeout(resolve, delay))
                            .then(() => retryFetch(url, options, retries - 1, delay));
                    } else {
                        throw error;
                    }
                });
        }

        document.addEventListener('DOMContentLoaded', () => {
            const cssLink = document.getElementById('css-resource');
            retryFetch(cssLink.href, { method: 'GET' }, 5, 2000)
                .then(response => response.text())
                .then(cssText => {
                    cssLink.href = `data:text/css;charset=utf-8,${encodeURIComponent(cssText)}`;
                })
                .catch(error => {
                    console.error('Final error:', error);
                });
        });
    </script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

解释

  1. retryFetch 函数:

    • 这个函数接受一个URL、选项对象、重试次数和延迟时间作为参数。
    • 使用fetch API 尝试加载资源。
    • 如果请求失败（即响应不成功），则递归调用自身进行重试。
    • 如果达到最大重试次数，则抛出最终的错误。

  2. DOMContentLoaded 事件:

    • 当文档完全加载且DOM树构建完成后触发。
    • 获取CSS链接元素，并使用retryFetch函数尝试加载CSS资源。

  3. 处理响应:

    • 如果请求成功，将返回的CSS文本直接嵌入到<link>标签的href属性中，以避免因网络问题导致的加载失败。

通过这种方式，可以确保浏览器在遇到网络错误时能够自动重试加载资源，直到成功为止。


try to cdn your resources

  1. 如果用的是chrome，检查一下是否被浏览器插件屏蔽了。
  2. 非要重复检查加载的话，就用延迟加载的方式，大概link也会有onload事件吧，检测这个事件状态，然后重复加载。
  3. 楼上说的方法。

那就直接使用xmlhttprequest请求了，不要在head  引用。。。。

问题是如果加载器都没加载成功？如何加载新资源，如何检测，鸡蛋问题了。。。。直接在html里面用script标签写加载器，保证加载器能被加载。

xmlhttprequest xxx.css if ok link else retry

似乎无解了？

你这条件太苛刻了，这cdn用得还不如vps托管资源呢。。。。。。

cdn吧，方便快捷

在Node.js环境中，我们无法直接控制浏览器的行为。不过，可以通过服务端返回适当的HTTP头或客户端JavaScript来实现重试机制。

客户端解决方案

你可以在客户端使用JavaScript来实现重试逻辑。当资源加载失败时，可以使用setInterval或setTimeout来定时重新加载资源。

以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Retry Loading Resource</title>
</head>
<body>
    <script>
        function loadResource(url) {
            let retryCount = 0;
            const maxRetries = 5;

            function tryLoad() {
                fetch(url)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.text();
                    })
                    .then(data => {
                        // 成功加载后停止重试
                        console.log('Resource loaded successfully:', data);
                    })
                    .catch(error => {
                        console.error('Error loading resource:', error);
                        retryCount++;
                        if (retryCount < maxRetries) {
                            setTimeout(tryLoad, 2000); // 2秒后重试
                        } else {
                            console.error('Max retries reached. Unable to load resource.');
                        }
                    });
            }

            tryLoad(); // 初始尝试加载
        }

        // 使用示例
        loadResource('/path/to/your/resource.css');
    </script>
</body>
</html>

服务端解决方案

在服务端，你可以设置适当的HTTP头，如Retry-After，但这种方法通常用于服务器响应特定错误时（例如HTTP 503），而不是客户端主动重试。

总结

上述示例展示了如何在客户端JavaScript中实现资源加载失败后的重试机制。通过fetch API进行资源请求，并在请求失败时使用setTimeout定时重试，直到成功或达到最大重试次数。这种方式适用于任何类型的资源，包括CSS、JS文件等。

回到顶部