uni-app：写了一个缓存 uni.request 的类，分享一下

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app：写了一个缓存 uni.request 的类，分享一下

因为不是每个request都需要去服务器拿。缓存一下，有助于提高性能。

直接替换uni.request(params)到 Utils.cashRequest(duration, params)就行了。

Utils.cacheRequest(3600,{
    url: "your-web-service-url",
    success: function (resp) {
        uni.stopPullDownRefresh();
    }.bind(this)
})

export default class Utils {      
    static cacheRequest(cacheDruation=3600, params) {  
        var key = JSON.stringify({url:params.url,data:params.data});  
        var cache = uni.getStorageSync(key);  
        var now = (new Date()).getTime() / 1000;  
        var success = params.success;  

        if (cache && cache.time + cacheDruation > now) {  
            success(cache.resp);  
            return;  
        }  

        params.success = function (resp) {  
            success(resp);  
            uni.setStorageSync(key, {  
                time: now,  
                resp: resp  
            });  
        }.bind(this);  
        uni.request(params);  
    }  
}

Harmonyos Next教程
1 回复

当然，很高兴分享一个用于缓存 uni.request 请求的类。这个类可以极大地提高应用的性能，特别是在处理频繁请求相同资源时。下面是一个简单的实现示例：

class CachedRequest {
  constructor(cacheDuration = 60000) { // 默认缓存时间为1分钟
    this.cache = {};
    this.cacheDuration = cacheDuration;
  }

  async request(options) {
    const { url, ...restOptions } = options;
    const cacheKey = url + JSON.stringify(restOptions); // 生成唯一的缓存键

    if (this.cache[cacheKey] && Date.now() - this.cache[cacheKey].timestamp < this.cacheDuration) {
      // 如果缓存未过期，则直接返回缓存数据
      console.log('Returning cached response for:', url);
      return this.cache[cacheKey].data;
    } else {
      // 如果缓存过期或不存在，则发起新的请求
      try {
        const response = await uni.request(options);
        this.cache[cacheKey] = {
          data: response.data,
          timestamp: Date.now()
        };
        return response.data;
      } catch (error) {
        throw error;
      }
    }
  }

  // 清除缓存（可选，可用于手动刷新缓存）
  clearCache(url, options = {}) {
    const { url: specificUrl, ...restSpecificOptions } = options;
    const cacheKey = specificUrl + JSON.stringify(restSpecificOptions);
    delete this.cache[cacheKey];
  }

  // 清除所有缓存（可选，可用于登出等场景）
  clearAllCache() {
    this.cache = {};
  }
}

// 使用示例
const cachedRequest = new CachedRequest(300000); // 设置缓存时间为5分钟

cachedRequest.request({
  url: 'https://api.example.com/data',
  method: 'GET'
}).then(data => {
  console.log('Request data:', data);
}).catch(error => {
  console.error('Request error:', error);
});

在这个示例中，CachedRequest 类封装了 uni.request，并添加了缓存逻辑。缓存的键由请求的 URL 和其他选项（如方法、参数等）组成，以确保唯一性。如果缓存中存在未过期的数据，则直接返回缓存数据；否则，发起新的请求，并将响应数据存入缓存。

此外，还提供了 clearCache 和 clearAllCache 方法，用于手动清除特定请求的缓存或清除所有缓存。这些方法在特定场景下非常有用，例如用户登出后清除所有缓存数据。

希望这个示例能帮助你更好地理解和实现 uni.request 的缓存功能。

回到顶部