Paging query cache (proxy mode)

Caching proxy

For repeated operations, can be used in the form of caching proxy caches (proxy mode of knowledge, I can see another article design patterns - proxy mode ), the paging query, for the same page, we do not want to repeat the request, after all ajax is very consumption performance, this time we can use caching proxy object, when there is a cache uses cache directly obtain, if not present when the ajax request back to the object.

Paging query optimization

Application proxy cache ajax reasons ajax asynchronous, it will use the callback or Promise, are the following encapsulation of the request, the request moduleaxios

function getArticle(currentPage,pageSize){
  return Http.mGet('/getArticle',{currentPage,pageSize}).then(e=>Promise.resolve(e.data));
}
export const proxyGetArticle = (function(){
  const caches = {};
  return async function(currentPage,pageSize){
    const cache = Array.prototype.join.call(arguments,',');
    // console.log(caches)
    if(cache in caches){
      return caches[cache];
    }
    await 
      getArticle(currentPage,pageSize).then(res=>{
        Promise.resolve(caches[cache] = res)
      })
    // await 
    return caches[cache];
  }
})()

Due to the event loop, 调用时多次调用需要使用awaitfollowing in the react-hookapplication

 useEffect(()  =>  {
    async function fetchData(){
        const List = await   proxyGetArticle(currentPage,pageSize)
        updateBlogList(data);
    }
    fetchData()
  }, [currentPage]);