React Native如何将APISAUCE接口响应存入AsyncStorage缓存并在FlatList展示

1. 安装依赖 #

需要用到两个库：AsyncStorage 做本地缓存存储，NetInfo 做网络状态判断，执行以下命令安装：

npm install @react-native-async-storage/async-storage @react-native-community/netinfo
# iOS 环境需要额外执行
cd ios && pod install && cd ..

安卓端需要在 android/app/src/main/AndroidManifest.xml 中添加网络状态权限：

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

2. 修改自定义useAPI Hook，加入缓存逻辑 #

替换原有的useAPI代码如下：

import React, { useState } from "react";
import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo from '@react-native-community/netinfo';

// 缓存key统一管理
const CACHE_KEY = 'cache_listings';

export default useAPI=(API)=> 
{
 const[data,setData]=useState([]);
 const [error , setError]=useState(false);
 const [isLoading ,setLoading]=useState(false);
 // 可选：标记当前是否使用缓存数据
 const [isOfflineCache, setIsOfflineCache] = useState(false);

 // 读取本地缓存的方法
 const loadCache = async () => {
   try {
     const cacheStr = await AsyncStorage.getItem(CACHE_KEY);
     if (cacheStr) {
       const cacheData = JSON.parse(cacheStr);
       setData(cacheData);
       return true;
     }
     return false;
   } catch (e) {
     console.log('读取缓存失败', e);
     return false;
   }
 }

 const request = async()=> {
    setLoading(true);
    setIsOfflineCache(false);
    // 先加载缓存，优先渲染内容
    const hasCache = await loadCache();
    // 获取网络状态
    const netState = await NetInfo.fetch();
    // 离线状态直接返回缓存，不发请求
    if (!netState.isConnected) {
      setLoading(false);
      setIsOfflineCache(true);
      // 没有缓存才显示错误
      setError(!hasCache);
      return;
    }
    // 在线状态发起请求
    const response = await API();
    setLoading(false);
    if(!response.ok) {
      // 请求失败 fallback 到缓存
      setIsOfflineCache(true);
      setError(!hasCache);
      return;
    }
    // 请求成功，更新缓存和页面数据
    setError(false);
    setData(response.data);
    try {
      await AsyncStorage.setItem(CACHE_KEY, JSON.stringify(response.data));
    } catch (e) {
      console.log('缓存写入失败', e);
    }
 }

 return {error , data ,isLoading ,request, isOfflineCache }
}

3. 页面可选优化 #

可以在ListingScreen中加入离线缓存提示，提升用户感知：

function ListingScreen({navigation}) {
  const loadListing= useAPI(getListings.getListings);
 
  useEffect(()=>{
    loadListing.request();
  }, []);

  return (
    <View style={styles.container} >
      {/* 离线提示 */}
      {loadListing.isOfflineCache && (
        <Text style={{textAlign: 'center', padding: 8, color: '#666', backgroundColor: '#fff3cd'}}>
          当前网络不佳，显示的是缓存内容
        </Text>
      )}
      {loadListing.error && (
        <View style={{marginTop:60}}>
          <Text style={{textAlign:"center"}}>
            无法加载数据，请检查网络连接后重试
          </Text>
          <AppButton title="重试" onPress={loadListing.request} />
        </View>
      )}
      {loadListing.isLoading ? 
        <View>
          <ActivityIndicator animating={true} size={80} color="grey" />
        </View> : 
        <FlatList 
          data={loadListing.data} 
          keyExtractor={list=>list.id.toString()}
          renderItem ={({item}) => 
            <Card 
              title={item.title} 
              subtitle={"$" +item.price} 
              image={item.images[0].url} 
              onPress={()=>navigation.navigate("ListingDetails" ,item )} 
            />
          } 
        />
      }
    </View>
  );
}

以上修改完成后，应用在线时会自动拉取最新数据并更新缓存，离线或请求失败时会自动读取缓存渲染，没有缓存的情况下才会显示错误提示。

内容的提问来源于stack exchange，提问作者huzaifac137