在JS Fetch API中实现缓存 - X Byte Lab

随着 Web 应用程序的快速发展以及对异步数据加载需求的增加，从早期的 XMLHttpRequest 和 ajax 到如今的 fetch，技术不断演进。如今，许多应用程序高度依赖异步数据加载，例如加载搜索建议、分页加载评论或滚动加载内容。为了优化这些操作，我们可以利用一些技术来提高 API 调用的效率。在本文中，我们将通过几行代码实现高达 76% 的网络请求减少，从而显著提升性能。

谁适合阅读这篇文章？

如果您的 Web 应用程序中包含搜索框、分页功能，或者需要多次通过 API 调用加载相同内容，那么这篇文章将为您提供有价值的优化思路。

实现缓存的基本思路

我们将使用 JavaScript 的 Fetch API 从服务器检索数据，并在输入框中键入内容时实时获取相关结果，最终将结果显示在页面上。以下是正常代码流的基本框图：

接下来，我们将学习如何通过实现缓存机制来优化这一流程：

深入了解缓存机制

为了更好地理解缓存机制的工作原理，我们可以参考以下流程图：

分解复杂性：核心功能与实现

核心功能

1. 用户在输入框中键入内容。
2. 每次按键触发一个函数调用。
3. 调用自定义的 AJAX 函数以获取数据。
4. 将返回的结果展示在页面上。

自定义 AJAX 函数的工作原理

1. 生成请求 URL 和数据的 MD5 哈希值。
2. 检查缓存中是否存在对应的哈希值。
3. 如果缓存命中，直接返回缓存数据。
4. 如果缓存未命中，则发起网络请求获取数据。
5. 将获取的数据存储到缓存中。
6. 将数据返回给回调函数。
7. 通过缓存机制减少 70% 的网络请求，从而降低服务器负载。

以下是实现该功能的代码示例：

// 用于存储缓存数据
var cache = [];

// 输入事件处理函数
function on_type(r = 0, val = null) {
    // 在 API 调用之前
    if (!r) {
        ajax(fetch.php?search=${val}, on_type);
    }
    // 在 API 调用之后
    else {
        // 使用结果填充 DOM
        let codes = r.results.map(e => <li>${e}</li>).join('');
        document.getElementById('results').innerHTML = codes;
    }
}// 实现缓存的自定义 AJAX 函数
function ajax(url, callback) {
    // 为每个唯一的 API 调用生成唯一字符串
    let hash = md5(url);
    // 检查缓存中是否存在数据
    let item = cache.find(e => e.hash === hash);
    // 如果找到缓存数据，则返回缓存数据
    if (item) return callback(item.r);
    // 如果未命中缓存，则发起网络请求
    fetch(url)
        .then(response => response.json())
        .then(response => {
            // 将数据存储到缓存中
            save_in_cache(hash, response);
            callback(response);
        });
}// 缓存数据存储函数
function save_in_cache(hash, response) {
    // 将数据存储到缓存中
    cache.push({ hash, r: response });
    // 限制缓存大小为 50 条记录，避免内存占用过高
    if (cache.length > 50) cache.splice(0, cache.length - 50);
}

优化成果

通过上述代码实现的缓存机制，我们可以显著减少网络请求次数。以下 GIF 动图展示了优化后的效果：在 90 次网络调用中，有 69 次是缓存命中，仅 24% 的请求是实际的网络调用，其余 76% 的数据均来自缓存。

总结与进一步优化

通过本文的介绍，我们学习了如何在网络调用中实现缓存机制，从而减少网络请求次数并降低服务器负载。除此之外，您还可以利用 sessionStorage 将缓存提升到更高的层次，以实现更持久的存储。

希望本文能为您提供一些启发，帮助您优化 Web 应用程序的性能！

原文链接: https://xbytelab.com/blog/Implement-caching-in-js-fetch-API/1293046