如何缓存请求数据？

Axios 如何取消重复请求? 这篇文章中，阿宝哥介绍了在 Axios 中如何取消重复请求及 CancelToken 的工作原理。本文将介绍在 Axios 中如何通过增强默认适配器来缓存请求数据。那么为什么要缓存请求数据呢?这是因为在缓存未失效时，我们可以直接使用已缓存的数据，而不需发起请求从服务端获取数据，这样不仅可以减少 HTTP 请求而且还能减少等待时间从而提高用户体验。

因为本文将使用 Axios 提供的默认适配器来实现缓存请求数据的功能，所以如果你对 Axios 适配器还不熟悉的话，建议先阅读 77.9K 的 Axios 项目有哪些值得借鉴的地方 这篇文章。为了让大家能够更好地理解后续的内容，我们先来看一下整体的流程图：图中蓝色部分的工作流程，就是本文的重点。接下来，阿宝哥将从如何设计缓存开始，带大家一起来开发缓存请求数据的功能。

一、如何设计缓存

在计算中，缓存是一个高速数据存储层，其中存储了数据子集，且通常是 短暂性 存储，这样日后再次请求该数据时，速度要比访问数据的主存储位置快。通过缓存，你可以高效地重用之前检索或计算的数据。了解完缓存的作用之后，我们来设计缓存的 API：

• get(key)：从缓存中获取指定 key 对应的值;
• delete(key)：从缓存中删除指定 key 对应的值;
• clear()：清空已缓存的数据;
• set(key, value, maxAge)：保存键值对，同时支持设置缓存的最大时间，即 maxAge 单位为毫秒。

基于上述的缓存 API，我们可以实现一个简单的缓存功能，具体代码如下所示：除了自定义缓存对象之外，你也可以使用成熟的第三方库，比如 lru-cache。

LRU 缓存淘汰算法就是一种常用策略。LRU 的全称是 Least Recently Used，也就是说我们认为最近使用过的数据应该是是「有用的」，很久都没用过的数据应该是无用的，内存满了就优先删那些很久没用过的数据。

二、如何增强默认适配器

Axios 引入了适配器，使得它可以同时支持浏览器和 Node.js 环境。对于浏览器环境来说，它通过封装 XMLHttpRequest API 来发送 HTTP 请求，而对于 Node.js 环境来说，它通过封装 Node.js 内置的 http 和 https 模块来发送 HTTP 请求。

在介绍如何增强默认适配器之前，我们先来回顾一下 Axios 完整请求的流程：

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!