qiangmao / axios

Promise based HTTP client for the browser and node.js
MIT License
38 stars 10 forks source link

Network error in GET request on local ip address on putting app to background and reopening it #88

Open ankitaporwal-nagarro opened 1 year ago

ankitaporwal-nagarro commented 1 year ago

when I make a GET request using https, and while data is still loading put app in background and open again it shows data on screen. But when I make a GET request using http to my locally hosted server, and while data is loading I put app to background, open app again, it shows Network Error. Same things I have performed with a fetch API and it works fine with http also.

This is my sample app code to verify this scenario - import axios from 'axios'; import React, {useEffect, useState} from 'react'; import {ActivityIndicator, Alert, FlatList, Text, View} from 'react-native';

type Movie = { MakeName: string; MakeId: string; id: string; title: string; releaseYear: string; };

const App = () => { const [isLoading, setLoading] = useState(true); const [data, setData] = useState<Movie[]>([]);

const getMovies = async () => { try { const response = await axios.get('https://reactnative.dev/movies.json'); const json = response.data.movies as unknown as Movie[]; setData(json); } catch (error) { console.log('AAAAAAAAA'); console.error(error); console.log('\n\n\n'); Alert.alert(error as string); } finally { setLoading(false); }

// try {
//   const response = await fetch(
//     'http://xxx.xxx.xxx.xxx/DEV/api/getAllModels', // Replace this with some local hosted IP where API is hosted. 
//   );
//   const json = await response.json();
//   setData(json);
// } catch (error) {
//   console.error(error);
// } finally {
//   setLoading(false);
// }

};

useEffect(() => { getMovies(); }, []);

return ( <View style={{flex: 1, padding: 24}}> {isLoading ? (

  ) : (
    <FlatList
      data={data}
      keyExtractor={({MakeId}) => MakeId}
      renderItem={({item}) => (
        <Text>
          {item.title}, {item.releaseYear}
        </Text>
      )}
    />
  )}
</View>

); };

export default App;

I've created a API wrapper with internally all Api calls being made using axis intense, and when I perform this app background action, on app reopen app fails with Network Error. If there is any solution possible then please let me know.