当前位置： 首页 > article >正文

优化 HTTP 接口请求：缓存策略与实现方法

article 2024/12/25 2:16:36

前言

在前端开发中，HTTP 请求的处理是至关重要的一环。Axios 作为一个流行的 HTTP 客户端，其简洁性和灵活性使得它广受开发者青睐。然而，为了优化应用性能和提升用户体验，合理地缓存请求结果显得尤为重要。本文将深入探讨如何在 Axios 中实现请求结果的缓存，通过多种方法和进阶技巧帮助开发者掌握这一关键技术。

为什么要缓存请求结果？

缓存请求结果有几个好处：

  1. 减少重复请求：避免对相同资源的频繁请求，降低服务器压力。
  2. 提高响应速度：从缓存中读取数据比从网络获取要快得多。
  3. 节省带宽：减少不必要的数据传输。

基本思路

实现缓存的思路是，在发起请求之前，先检查缓存是否已有数据。如果有，则直接返回缓存的数据；如果没有，则发起请求并将结果存入缓存。

使用 Axios 缓存请求

我们可以通过几种方式来实现缓存机制：

方法一：手动缓存

手动缓存是最直接的方法，即自己管理缓存逻辑。下面是一个简单的示例：

const axios = require('axios');

const cache = {};

async function fetchData(url) {
  if (cache[url]) {
    console.log('从缓存中读取数据');
    return cache[url];
  }

  try {
    const response = await axios.get(url);
    cache[url] = response.data;
    console.log('从网络获取数据');
    return response.data;
  } catch (error) {
    console.error('请求失败', error);
    throw error;
  }
}

// 测试

fetchData('https://jsonplaceholder.typicode.com/posts/1').then(console.log);
fetchData('https://jsonplaceholder.typicode.com/posts/1').then(console.log);

方法二：使用 Axios 拦截器

我们可以利用 Axios 的拦截器特性，在请求发出前和响应收到后进行处理。

const axios = require('axios');
const cache = {};

axios.interceptors.request.use((config) => {
  const cachedResponse = cache[config.url];
  if (cachedResponse) {
    console.log('从缓存中读取数据');
    return Promise.reject(cachedResponse); // 通过拒绝请求来使用缓存
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
  cache[response.config.url] = response;
  console.log('从网络获取数据并缓存');
  return response;
}, (error) => {
  return Promise.reject(error);
});

// 测试

axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => console.log(response.data));
axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => console.log(response.data));

方法三：使用第三方库 axios-cache-adapter

如果你不想自己处理缓存逻辑，可以使用现成的解决方案，比如 axios-cache-adapter。
首先，安装这个库：

npm install axios-cache-adapter

然后，配置 Axios 使用缓存适配器：

const axios = require('axios');
const { setup } = require('axios-cache-adapter');

// 创建 axios 实例，并配置缓存
const api = setup({
  cache: {
    maxAge: 15 * 60 * 1000 // 缓存 15 分钟
  }
});

// 测试

api.get('https://jsonplaceholder.typicode.com/posts/1').then(response => console.log(response.data));
api.get('https://jsonplaceholder.typicode.com/posts/1').then(response => console.log(response.data));

进阶技巧

1. 缓存失效机制

在实际应用中，并不是所有的数据都适合长期缓存。例如，某些数据变化频繁，缓存时间就需要设置得短一些。我们可以通过设置缓存的最大有效时间（TTL, Time To Live）来实现。

如果使用手动缓存，TTL 可以这样实现：

const cache = {};
const ttl = 5 * 60 * 1000; // 缓存5分钟

async function fetchData(url) {
  const cachedData = cache[url];
  const now = Date.now();

  if (cachedData && (now - cachedData.timestamp < ttl)) {
    console.log('从缓存中读取数据');
    return cachedData.data;
  }

  try {
    const response = await axios.get(url);
    cache[url] = {
      data: response.data,
      timestamp: now
    };
    console.log('从网络获取数据');
    return response.data;
  } catch (error) {
    console.error('请求失败', error);
    throw error;
  }
}

// 测试
fetchData('https://jsonplaceholder.typicode.com/posts/1').then(console.log);

2. 缓存清除策略

为了防止缓存无限增长占用内存，我们需要定期清除过期的缓存项。你可以通过定时器定期检查缓存并清除过期项。

const cache = {};
const ttl = 5 * 60 * 1000; // 缓存5分钟

function clearExpiredCache() {
  const now = Date.now();
  for (const url in cache) {
    if (now - cache[url].timestamp > ttl) {
      delete cache[url];
      console.log(`清除过期缓存: ${url}`);
    }
  }
}

// 每分钟清除一次过期缓存
setInterval(clearExpiredCache, 60 * 1000);

// 请求函数
async function fetchData(url) {
  const cachedData = cache[url];
  const now = Date.now();

  if (cachedData && (now - cachedData.timestamp < ttl)) {
    console.log('从缓存中读取数据');
    return cachedData.data;
  }

  try {
    const response = await axios.get(url);
    cache[url] = {
      data: response.data,
      timestamp: now
    };
    console.log('从网络获取数据');
    return response.data;
  } catch (error) {
    console.error('请求失败', error);
    throw error;
  }
}

// 测试
fetchData('https://jsonplaceholder.typicode.com/posts/1').then(console.log);

3. 结合 IndexedDB

对于一些需要长期缓存的场景，可以考虑使用浏览器的 IndexedDB，它是一个低级 API，用于在用户的浏览器中存储大量的结构化数据。IndexedDB 提供了持久化存储，适合离线应用或需要保存大数据的场景。

以下是如何结合 IndexedDB 和 Axios 实现持久化缓存的一个示例：

const axios = require('axios');
const idb = require('idb');

async function initDB() {
  const db = await idb.openDB('axios-cache', 1, {
    upgrade(db) {
      db.createObjectStore('responses', { keyPath: 'url' });
    }
  });
  return db;
}

const dbPromise = initDB();

async function fetchData(url) {
  const db = await dbPromise;
  const cachedResponse = await db.get('responses', url);

  if (cachedResponse) {
    console.log('从 IndexedDB 缓存中读取数据');
    return cachedResponse.data;
  }

  try {
    const response = await axios.get(url);
    await db.put('responses', { url, data: response.data });
    console.log('从网络获取数据并缓存到 IndexedDB');
    return response.data;
  } catch (error) {
    console.error('请求失败', error);
    throw error;
  }
}

// 测试
fetchData('https://jsonplaceholder.typicode.com/posts/1').then(console.log);

4. API 请求去重

有时候，可能会同时发起多个相同的请求，为了避免重复的网络请求，可以在缓存中保存未完成的请求，并在请求完成后更新缓存。

const axios = require('axios');

const cache = {};
const pendingRequests = {};

async function fetchData(url) {
  if (cache[url]) {
    console.log('从缓存中读取数据');
    return cache[url];
  }

  if (pendingRequests[url]) {
    console.log('已有请求正在进行，等待结果');
    return pendingRequests[url];
  }

  try {
    const requestPromise = axios.get(url);
    pendingRequests[url] = requestPromise;

    const response = await requestPromise;
    cache[url] = response.data;
    delete pendingRequests[url];

    console.log('从网络获取数据');
    return response.data;
  } catch (error) {
    delete pendingRequests[url];
    console.error('请求失败', error);
    throw error;
  }
}

// 测试
fetchData('https://jsonplaceholder.typicode.com/posts/1').then(console.log);
fetchData('https://jsonplaceholder.typicode.com/posts/1').then(console.log);

总结

缓存机制在提升应用性能和用户体验方面具有不可替代的作用。通过适当的缓存策略，可以显著减少网络请求次数，节省带宽，并提高数据获取速度。本文详细介绍了三种在 Axios 中实现缓存的方法：手动缓存、使用 Axios 拦截器以及利用第三方库 axios-cache-adapter，并进一步探讨了缓存失效机制、缓存清除策略、结合 IndexedDB 和请求去重等进阶技巧。


http://www.kler.cn/a/450108.html

相关文章：

  • http协议的状态码
  • Mono里运行C#脚本3—mono_jit_init
  • 四种自动化测试模型实例及优缺点详解
  • 算法day_3数组中的单一元素和二进制位颠倒
  • LeetCode 209. 长度最小的子数组 (C++实现)
  • 运维工程师面试系统监控与优化自动化与脚本云计算的理解虚拟化技术的优点和缺点
  • Leetcode1705：吃苹果的最大数目
  • Jetson xavier 刷机安装教程
  • new 分配空间；引用
  • 电气设计 | 低压接地系统：TN-C 、TN-S、TN-C-S、TT适用哪些场所？
  • vue中proxy代理配置(测试二)
  • 大模型面试快问快答
  • 设计模式--抽象工厂模式【创建型模式】
  • 利用Spring Cloud Gateway Predicate优化微服务路由策略
  • 【wordpress】建立数据库连接时出错，您看到此页面，则表示您在 wp-config.php 文件中定义的用户名和密码信息不正确，或是……
  • QT——day1
  • 畅捷通-条件竞争
  • 前端开发 之 12个鼠标交互特效上【附完整源码】
  • 120页PPT讲解ChatGPT如何与财务数字化转型的业财融合
  • Scala_【2】变量和数据类型
  • 批量生成二维码，助力数字化管理-Excel易用宝
  • Debezium日常分享系列之：Debezium 3.0.5.Final发布
  • 腾讯云云开发 Copilot具有以下优势
  • 外连接转AntiJoin的应用场景与限制条件 | OceanBase SQL 查询改写系列
  • 微服务——数据管理与一致性
  • [前端]mac安装nvm（node.js）多版本管理