实现缓存功能

src/components/RepositoryList.tsx

@@ -3,6 +3,7 @@ import { search as SearchRepository } from '../api/repository'
 import RepopositoryItem from './RepositoryItem'
 import { RepositorySearchResultItem } from '../api/api'
 import classes from './style/RepositoryList.module.css'
+import { RepositorySearchCache } from '../utils/cache/RepositorySearch'
 
 interface RepositoryListProps {
 
@@ -20,6 +21,8 @@ interface RepositoryListProps {
 const DEFAULT_PER_PAGE = 30
 
 export default function RepositoryList (props:RepositoryListProps) {
+  const cache = RepositorySearchCache(props.keyword, props.max_cache_page)
+
   /** 当前页 */
   const [current_page, setCurrentPage] = useState(1)
 
@@ -37,27 +40,53 @@ export default function RepositoryList (props:RepositoryListProps) {
 
   const [list, setList] = useState<RepositorySearchResultItem[]>([])
 
-  async function search (page:number) {
+  /**
+   * 调用搜索接口
+   * @param {number} page 页码
+   * @returns {Promise<void>}
+   */
+  async function search (page:number):Promise<void> {
     setLoading(true)
-    try {
-      /* eslint-disable */
-      var result = await SearchRepository(props.keyword, page)
-    } catch (err) {
-      setLoading(false)
-      return
+
+    const cache_list = cache.read(page)
+
+    let _total_page = 0
+
+    // 有缓存
+    if (cache_list) {
+      setList(cache_list)
+      _total_page = cache.getTotalPage()
+    } else {
+      // 没有缓存，调用接口
+      try {
+        /* eslint-disable */
+        var result = await SearchRepository(props.keyword, page)
+        
+      } catch (err) {
+        console.log('fetch',err);
+        alert(err.message)
+        setLoading(false)
+        return
+      }
+      
+      _total_page = Math.ceil(result.total_count / DEFAULT_PER_PAGE)
+  
+      setList(result.items)
+
+      cache.add(page,result.items)
+      cache.updateTotalPage(_total_page)
     }
-    
-    const _total_page = Math.ceil(result.total_count / DEFAULT_PER_PAGE)
-    setTotalPage(_total_page)
-
-    setCurrentPage(page)
-
-    setList(result.items)
 
     setPrevButtonEnable(page>1)
+
     setNextButtonEnable(page<_total_page)
 
+    setTotalPage(_total_page)
+  
+    setCurrentPage(page)
+
     setLoading(false)
+
   }
 
   useEffect(() => {