javascript - 在reactjs中缓存类似组件

Question

我正在为 native 提取实现缓存，并使用最新的 ReactJS。我想知道是否有办法拥有一个全局提供程序或类似的东西，如果 URL 存在，只需返回缓存的数据，或者如果不存在，则进行调用。我不想使用 redux 因为我不关心状态变化，我也不想使用本地/ session 存储，因为我不想在页面刷新时保持不变。所以我想知道我该怎么做？

我想从应用程序中的任何位置导入我的 Fetch 包装器，并且 fetch 包装器调用缓存来检查是否进行了调用。所以对于缓存，我希望它是一个全局组件或提供者。

Answer 1

可以创建一个简单的类，使用 url 作为键在内部存储 promise。

如果存储的 promise 存在，则返回它，如果不存在，则存储新的请求 promise 并返回。

最后分配一个新的实例并将其导入您应用中的任何位置

class Store {
  constructor() {
    this.store = new Map;
    this.baseUrl = 'https://api.myjson.com/bins/'
  }

  getData(path) {
    let message = 'Cached promise'
    const url = this.baseUrl + path
    let promise = this.store.get(url)
    if (!promise) {
      // if url key doesn't exist in map, create and store new promise
      promise = fetch(url).then(res => res.json());
      message = 'New request promise'
      // store this promise using url as key
      this.store.set(url, promise);
    }
    // remove this `then()` and all `message` references in production code
    // just do `return promise`
    return promise.then(data => [data, 'Path : '+ path, message])
  }

}
// export this to use it anywhere in app
const DataStore = new Store();
// export default DataStore

// run multiple times for various paths 
const bins = ['1cvac6', 'exkuu'];
bins.forEach(path => {
  for (let i = 0; i < 3; i++) {
    DataStore.getData(path).then(res => console.log(JSON.stringify(res)))
  }
})

注意这只是一个基本的开始，我留给你添加错误处理