如何在JavaScript中按优先级分批次链式缓存资源

资源分组说明 #

假设Web应用根目录下有以下资源，需按第一组→第二组→第三组的顺序分批次缓存，后一组必须等前一组缓存完成后再启动：

• 第一组：image1.jpg、info1.txt、video1.mp4
• 第二组：image2.jpg、info2.txt、video2.mp4
• 第三组：image3.jpg、info3.txt、video3.mp4

步骤1：检查浏览器Cache API支持 #

在执行缓存操作前，先判断浏览器是否支持Cache API：

if ('caches' in window) {
    // 支持Cache API，可执行后续缓存逻辑
} else {
    console.log('当前浏览器不支持Cache API');
}

步骤2：创建缓存容器 #

通过caches.open()为每组资源创建独立的缓存容器（类似浏览器内的隐藏文件夹）：

// await需在async函数中使用
async function initCaches() {
    try {
        const myCache1 = await caches.open('my-cache-1');
        const myCache2 = await caches.open('my-cache-2');
        const myCache3 = await caches.open('my-cache-3');
        return { myCache1, myCache2, myCache3 };
    } catch (err) {
        console.error('创建缓存容器失败：', err);
        throw err;
    }
}

步骤3：定义资源路径数组 #

为每组资源对应的路径定义数组：

const firstGroup = ['/image1.jpg', '/info1.txt', '/video1.mp4'];
const secondGroup = ['/image2.jpg', '/info2.txt', '/video2.mp4'];
const thirdGroup = ['/image3.jpg', '/info3.txt', '/video3.mp4'];

步骤4：实现顺序缓存（两种写法） #

写法一：.then().catch().finally()链式调用 #

适合不使用async/await的场景，同时包含错误处理：

if ('caches' in window) {
    caches.open('my-cache-1')
        .then(myCache1 => {
            console.log('开始缓存第一组资源');
            return myCache1.addAll(firstGroup);
        })
        .then(() => {
            console.log('第一组缓存完成，启动第二组');
            return caches.open('my-cache-2');
        })
        .then(myCache2 => {
            return myCache2.addAll(secondGroup);
        })
        .then(() => {
            console.log('第二组缓存完成，启动第三组');
            return caches.open('my-cache-3');
        })
        .then(myCache3 => {
            return myCache3.addAll(thirdGroup);
        })
        .then(() => {
            console.log('所有资源缓存完成');
        })
        .catch(err => {
            console.error('缓存出错：', err);
            // 可添加错误重试、降级等自定义逻辑
        })
        .finally(() => {
            console.log('缓存流程结束');
        });
}

写法二：async/await（可读性更强） #

用async/await简化链式逻辑，同时包含错误处理：

async function cacheInOrder() {
    if (!('caches' in window)) {
        console.log('当前浏览器不支持Cache API');
        return;
    }

    try {
        // 缓存第一组
        const myCache1 = await caches.open('my-cache-1');
        console.log('开始缓存第一组资源');
        await myCache1.addAll(firstGroup);
        console.log('第一组缓存完成');

        // 缓存第二组
        const myCache2 = await caches.open('my-cache-2');
        console.log('开始缓存第二组资源');
        await myCache2.addAll(secondGroup);
        console.log('第二组缓存完成');

        // 缓存第三组
        const myCache3 = await caches.open('my-cache-3');
        console.log('开始缓存第三组资源');
        await myCache3.addAll(thirdGroup);
        console.log('所有资源缓存完成');
    } catch (err) {
        console.error('缓存出错：', err);
        // 可针对当前出错分组添加重试逻辑
    } finally {
        console.log('缓存流程结束');
    }
}

// 执行缓存函数
cacheInOrder();

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