分頁查詢緩存（代理模式）

緩存代理

對於多次重複的操作，可以使用緩存代理的形式進行緩存（代理模式的知識，可以看我另外一篇文章設計模式-代理模式），在分頁查詢中，對於相同的分頁，我們不希望進行重複的請求，畢竟ajax是非常消耗性能的，這個時候就可以使用緩存代理對象，當存在緩存時直接使用緩存進行獲取，當不存在時纔將請求交還給ajax對象。

在分頁查詢中的優化

在ajax中應用緩存代理，由於ajax異步的原因，所以會使用到回調或者Promise，以下是對請求的封裝，使用的請求模塊是axios

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];
  }
})()

由於事件循環的原因，調用時多次調用需要使用await，以下是在react-hook中的應用

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