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

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

谁适合阅读这篇文章？

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

实现缓存的基本思路

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

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

深入了解缓存机制

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

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

核心功能

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

自定义 AJAX 函数的工作原理

生成请求 URL 和数据的 MD5 哈希值。
检查缓存中是否存在对应的哈希值。
如果缓存命中，直接返回缓存数据。
如果缓存未命中，则发起网络请求获取数据。
将获取的数据存储到缓存中。
将数据返回给回调函数。
通过缓存机制减少 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% 的数据均来自缓存。

总结与进一步优化

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

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

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