js fetch head 测试一个资源存不存在

有时候可以用 head 请求快速测试一个资源存在与否

在 JavaScript 中，可以使用 fetch 方法发送一个 HTTP HEAD 请求来测试某个资源是否存在。HEAD 请求的特点是它只请求资源的头部信息，而不会下载资源的主体内容。通过检查响应的状态码（如 200 表示资源存在，404 表示资源不存在），我们可以判断资源是否存在。

以下是一个完整的实现示例：

示例代码

async function resourceExists(url) {
    try {
        // 发送 HEAD 请求
        const response = await fetch(url, { method: 'HEAD' });

        // 检查状态码是否为 2xx 范围
        if (response.ok) {
            console.log(`资源存在: ${url}`);
            return true;
        } else {
            console.log(`资源不存在或无法访问，状态码: ${response.status}`);
            return false;
        }
    } catch (error) {
        // 捕获网络错误或其他异常
        console.error(`请求失败: ${error.message}`);
        return false;
    }
}

// 测试资源是否存在
const url = 'https://example.com/some-resource';
resourceExists(url);

代码解析

  1. fetch 方法：

    • 使用 fetch 的第二个参数 { method: 'HEAD' } 指定请求方法为 HEAD。
    • HEAD 请求只会获取响应头，不会下载响应体，因此效率更高。

  2. 响应状态码检查：

    • response.ok 是一个布尔值，表示响应的状态码是否在 200-299 范围内。
    • 如果状态码为 200，说明资源存在；如果是 404 或其他非 2xx 状态码，则说明资源不存在或不可访问。

  3. 异常处理：

    • 如果网络请求失败（例如跨域问题、DNS 解析失败等），fetch 会抛出异常，因此需要使用 try-catch 捕获错误。

  4. 日志输出：

    • 根据不同的情况输出详细信息，便于调试和排查问题。

注意事项

  1. 跨域限制：

    • 如果目标资源的服务器未设置允许跨域请求（CORS），浏览器会阻止 HEAD 请求并抛出跨域错误。在这种情况下，您可能需要联系服务器管理员配置 CORS，或者使用代理服务器解决跨域问题。

  2. 响应头信息：

    • 有些服务器可能会对 HEAD 请求返回不完整或不一致的响应头信息。如果需要更精确的判断，可以考虑改用 GET 请求，但要注意性能开销。

  3. 缓存行为：

    • 浏览器可能会缓存 HEAD 请求的结果。如果需要确保每次请求都直接从服务器获取最新信息，可以在请求中添加随机查询参数，例如： javascript const response = await fetch(`${url}?t=${Date.now()}`, { method: 'HEAD' });

通过上述方法，您可以高效地测试一个资源是否存在，并根据实际需求进行扩展和优化。如果有进一步的问题，请随时补充说明！