面试题：Qwik与axios集成时的数据缓存策略

Question

在Qwik应用使用axios进行API调用场景下，由于部分数据不常变化，如何实现数据的缓存机制，使得在一定时间内重复的API请求直接从缓存中获取数据，而不是再次向服务器请求？请阐述实现思路并提供关键代码示例。

Answer 1

实现思路

1. 创建缓存对象：在应用中创建一个对象用于存储缓存数据，例如cache对象。
2. 记录缓存时间：为每个缓存数据项添加时间戳，用于判断缓存是否过期。
3. 封装API调用函数：在调用axios的函数中，先检查缓存中是否存在对应数据且未过期。若存在则直接返回缓存数据；否则，调用axios获取数据，更新缓存并返回新数据。

关键代码示例

import axios from 'axios';

// 创建缓存对象
const cache = {};

// 封装API调用函数
async function apiCallWithCache(url, options = {}, cacheDuration = 60 * 1000) {
    const cached = cache[url];
    if (cached && Date.now() - cached.timestamp < cacheDuration) {
        return cached.data;
    }

    const response = await axios(url, options);
    cache[url] = {
        data: response.data,
        timestamp: Date.now()
    };
    return response.data;
}

// 使用示例
apiCallWithCache('/api/someData')
  .then(data => {
        console.log(data);
    })
  .catch(error => {
        console.error(error);
    });