js cache缓存不了的问题请教

Question

const cacheName = 'my-cache';


export async function cacheFile(key: string, response: Response): Promise<void> {
    try {
        const cache: Cache = await caches.open(cacheName);
        const clonedResponse = response.clone(); // 克隆响应对象
        await cache.put(key, clonedResponse);
        // // 将响应体转换为可重复读取的 Blob 对象
        // const blob = await response.blob();
        // const clonedResponse = new Response(blob, response);
        // await cache.put(key, clonedResponse); // 将克隆的响应对象放入缓存

        console.log(`PDF 已缓存: ${key}`);
    } catch (error) {
        console.error('缓存操作发生错误:', error);
    }
}



export async function getCachedFile(key: string): Promise<Response | null> {
    try {
        const cache: Cache = await caches.open(cacheName);
        const response: Response | undefined = await cache.match(key);
        if (response) {
            console.log(`从缓存中获取 PDF: ${key}`);
            return response;
        }
        console.log(`未找到缓存的 PDF: ${key}`);
        return null;
    } catch (error) {
        console.error('缓存操作发生错误:', error);
        return null;
    }
}

为什么我把文件写入缓存时,报错:
           const fileName = url!.substring(url!.lastIndexOf('/') + 1);
            const cachedFile = await getCachedFile(fileName)
            let response:Response
            if(cachedFile){
               response = cachedFile
            } else {
                response = await fetch(serverURL + url!,{cache: 'force-cache'});
                cacheFile(fileName,response)
            }
            // const response = cachedFile ?? await fetch(serverURL + url!,{cache: 'force-cache'});
           
            pdfData = await response.arrayBuffer();

一直报错如下:
缓存操作发生错误: TypeError: Failed to execute 'clone' on 'Response': Response body is already used
    at cacheFile (cacheFun.ts:7:41)

Answer 1

这个错误的原因是因为 Response 对象在使用后就会被关闭。你通过 await response.arrayBuffer() 来获取响应体，这表示该响应已被使用过了。
当你将这个响应对象传递给 cacheFile 函数时，它尝试克隆响应对象，以便将其放入缓存中。由于该响应对象在之前已经被使用过了，因此无法再次进行克隆操作，从而导致错误。
解决这个问题的方法是，在使用响应体后，将其克隆一份，并对克隆的响应对象进行操作，而不是直接使用原始响应对象。
虽然你已经在 cacheFile 函数中对响应对象进行了克隆，但是你没有在具体使用响应对象的地方进行克隆。你可以将这段代码修改为：

const fileName = url!.substring(url!.lastIndexOf('/') + 1);
const cachedFile = await getCachedFile(fileName)
let response: Response
if (cachedFile) {
    response = cachedFile.clone(); // 克隆响应对象
} else {
    response = await fetch(serverURL + url!, { cache: 'force-cache' });
    cacheFile(fileName, response.clone()); // 将克隆的响应对象放入缓存
}
pdfData = await response.arrayBuffer();

以上的不是很重要 ,重要的是给个采纳加关注 下个问题不迷路谢谢谢谢