未捕获（承诺中）ReferenceError：cacheResponse未在HTMLButtonElement.fetchData中定义

Question

我是 PWA 新手，正在尝试一个示例。其余部分工作正常，除非它尝试从缓存的 API 响应中获取。以下是我正在使用的 app.js 的摘录。当它尝试从缓存的响应中获取时，这一行：

var data = await cacheResponse.json();

给出了标题中列出的错误。我检查了缓存的响应和 API 响应，它们是相同的。可以是范围吗？如果是这样，我应该如何解决？感谢您的任何建议。

document.getElementById('fetch-data').addEventListener('click', fetchData);

async function fetchData() {
    const apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';
    const cacheName = 'api-cache';
    
    var cache = await caches.open(cacheName);
    var cachedResponse = await cache.match(apiUrl);
    
    if (cachedResponse) {
        console.log('Serving from cache: ', cachedResponse);
        var data = await cacheResponse.json();
        displayData(data);
    } else {
        try {
            var response = await fetch(apiUrl);
            console.log('Serving from API: ', response);
            cache.put(apiUrl, response.clone());
            var data = await response.json();
            displayData(data);
        } catch (error) {
            console.error('Failed to fetch data: ', error);
        }
    }
}

function displayData(data) {
    document.getElementById('data').textContent = JSON.stringify(data, null, 2);
}

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(registration => {
                console.log('Service Worker registered with scope: ', registration.scope);
            })
            .catch(error => {
                console.error('Service Worker registration failed: ', error);
            });
    });
}

我希望缓存的 API 响应能够正常工作并在屏幕上打印响应；与 API 实际调用时相同。

Answer 1

啊，我才发现有错别字。它应该是cachedResponse.json()，而不是cacheResponse.json()。我真傻。

请关闭此问题。