为什么JavaScript获取响应的主体被认为已经使用了?

我是JavaScript的初学者,目前正在尝试为PWA编写一名服务人员。

以下是我拦截获取请求的方式(缓存优先策略):

async function cache(request, response)
{
    if (response.type !== "error" && response.type !== "opaque") 
    {//don't cache network errors
        try 
        {
            const currentCache = await caches.open(CACHE_NAME);
            currentCache.put(request, response.clone());
        }
        catch(e)
        {
            console.error(e);
        }
    }
}

async function fetch_response(req)
{
    try 
    {
        let response = await caches.match(req);
        if (!response)
        {//response is not in cache, fetching
            response = await fetch(req);
            cache(req, response);
        }
        return response;
    }
    catch (e)
    {
        console.error(e);
    }
}

function when_fetch(event)
{
    const response = fetch_response(req)
    event.respondWith(response);
}

self.addEventListener("fetch", when_fetch);

我的问题是:

currentCache.put(request, response.clone());

引发以下错误:

TypeError:未能对“Response”执行“clone”:已使用响应正文

我不明白为什么会这样:我以前没有使用响应体,因为我正在调用函数 cache 在获取后立即(并且删除对response.type的检查不会更改任何内容)。