有啥方法可以将从 APISAUCE API 收到的响应存储到异步存储中作为缓存并在 React Native 的平面列表中显示

Posted 2023-05-07

【中文标题】有啥方法可以将从 APISAUCE API 收到的响应存储到异步存储中作为缓存并在 React Native 的平面列表中显示

【英文标题】：IS there any Way To store response received from APISAUCE API into the Async Storage as cache and show it in Flat List in React Native有什么方法可以将从 APISAUCE API 收到的响应存储到异步存储中作为缓存并在 React Native 的平面列表中显示

【发布时间】：2021-12-20 00:27:27

【问题描述】：

我正在使用 APISAUCE 从节点服务器获取响应，然后在 FlatList 中显示数据。 我实际上想要做的是将此响应作为缓存存储在 AsyncStorage 中，因此当应用程序处于脱机状态时，必须从 AsyncStorage 检索要在 FlatList 中显示的数据，而不是从服务器获取它。

这是我的代码实现：

 import  create  from "apisauce";

const apiClient = create(
    baseURL : "http://192.168.10.9:9000/api"

    );



    export default apiClient;

import apiClient from "./client";

    
const endpoint = "/listings";

const getListings =() =>

    return apiClient.get(endpoint);


export default getListings;

import React ,  useState  from "react";

export default useAPI=(API)=> 

 const[data,setData]=useState([]);
 const [error , setError]=useState(false);
 const [isLoading ,setLoading]=useState();


 
const request = async()=> 
    setLoading(true);
    const response = await API();
    setLoading(false);
    if(!response.ok) return setError(true);
 
 
     setError(false);
     setData(response.data);
     
    
 

 return error , data ,isLoading ,request  

function ListingScreen(navigation) 

  const loadListing= useAPI(getListings.getListings);
 

useEffect(()=>

loadListing.request();

, []);


    return (
        <View style=styles.container >
loadListing.error && (
    <View style=marginTop:60>
        <Text style=textAlign:"center">
            Cannot Retrieve Data From Server
        </Text>

        <AppButton title="retry" 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>
    );

【参考方案1】：

当用户打开应用时：

首先检查本地存储 如果那里存在数据，请解析数据，然后将数据呈现到您的平面列表。 如果未找到，请向您的 url 请求，然后将数据转换为字符串并存储在存储中。最后更新您的数据。

import React ,  useState  from "react";

export default useAPI=(URL)=> 

 const[data,setData]=useState([]);
 const [error , setError]=useState(false);
 const [isLoading ,setLoading]=useState();

const _getDataFromStorage = async () => 
  /*
  - Getting data from async storage
  - If data wasn't null, Parse data for covering string to object 
  and update your states and return true
  - If data was null return false*/

 
const request = async ()=> 
   try 
    if (await _getDataFromStorage()) 
      return;
    

    setLoading(true);
    const response = await fetch(
      URL,
      //your request options
    );
    setLoading(false);
    if(!response.ok) 
      return setError(true);
    
    const responseJson = await response.json();
    setError(false);
    setData(responseJson.data);
    catch (error) 
     console.error(error);
     setError(true);
   
    
 

 return error , data ,isLoading

然后做你的其他实现。