如何使用JavaScript检测指定URL的资源是否存在？

嘿，作为JavaScript新手，你遇到的这个需求其实很常见——我们可以通过fetch API的响应状态来判断资源是否真实存在，不用额外工具就能搞定。下面是调整后的代码和详细解释：

核心思路 #

1. 先尝试请求目标路径（pathURL）的资源
2. 检查响应是否成功（HTTP状态码在200-299之间，说明文件存在且可正常访问）
3. 如果成功，就用这个资源的内容；如果失败（包括文件不存在、网络错误等情况），就回退到默认资源（newElement）

修改后的完整代码 #

// 如果不存在目标资源，则加载默认资源
function loadElement(elementID){
    // 定义默认资源路径
    const defaultElement = "/assets/main/" + elementID + ".html";
    // 定义当前加载文档的路径
    const docURL = document.URL;
    // 查找URL中最后一个"/"的位置
    const lastSlash = docURL.lastIndexOf("/") + 1;
    // 将docURL裁剪为当前目录路径
    const docDir = docURL.substring(0,lastSlash);
    // 目标资源的路径
    const targetPath = docDir + elementID + ".html";

    // 先尝试请求目标路径的资源
    fetch(targetPath)
        .then(response => {
            // 检查响应是否成功（状态码200-299表示资源存在且可访问）
            if (response.ok) {
                return response.text();
            }
            // 若响应失败，抛出异常进入catch分支加载默认资源
            throw new Error("Target resource not available");
        })
        .then(data => {
            document.getElementById(elementID).innerHTML = data;
        })
        .catch(() => {
            // 加载默认资源
            fetch(defaultElement)
                .then(data => data.text())
                .then(data => {
                    document.getElementById(elementID).innerHTML = data;
                })
                // 可添加默认资源加载失败的容错处理
                .catch(err => console.error("Failed to load default resource:", err));
        });
}

// 当窗口加载完成后，加载指定元素
window.onload = () => {
    loadElement("navbar");
    loadElement("left-sidebar");
    loadElement("right-sidebar");
    loadElement("footer");
}

关键细节解释 #

• 响应状态判断：response.ok是fetch提供的便捷属性，等价于response.status >= 200 && response.status < 300，能准确判断资源是否成功返回。
• 错误捕获逻辑：catch分支会处理两种场景：目标资源不存在（返回404状态）、网络请求失败。这时候统一回退到默认资源，保证页面关键元素能正常显示。
• 变量语义优化：把newElement改成defaultElement，让变量含义更清晰，避免代码混淆。

新手友好的最佳实践 #

• 减少重复请求：如果多个元素需要类似加载逻辑，可以封装通用的资源加载函数，减少代码冗余。
• 缓存已加载资源：对于导航栏、页脚这类不常变动的元素，可以把加载后的内容存在内存中，下次直接复用，降低服务器请求压力。
• 友好的错误提示：在生产环境中，可以给用户展示简洁的加载失败提示，而不只是在控制台打印错误信息。

内容的提问来源于stack exchange，提问作者spriterjohnson