Wie führe ich Aktionen aus, während ich auf die Antwort des Servers in der Fetch-API von react native warte?

Question

The React Native docs zeigen den folgenden Code für React-Eingeborenen holen API:

function getMoviesFromApiAsync() { 
    return fetch('https://facebook.github.io/react-native/movies.json') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
     return responseJson.movies; 
    }) 
    .catch((error) => { 
     console.error(error); 
    }); 
} 

Was ich suche ist der Ort, an Dinge wie ein Laden Skript zu setzen, während fetch den Server ruft, so etwas wie die folgenden, nicht Arbeitscode:

function getMoviesFromApiAsync() { 
    return fetch('https://facebook.github.io/react-native/movies.json') 
    .whileWating(() => { 
     // This is the type of thing I want to put into the fetch 
     console.log('Waiting for the server response.') 
    }) 
    .then((response) => response.json()) 
    .then((responseJson) => { 
     return responseJson.movies; 
    }) 
    .catch((error) => { 
     console.error(error); 
    }); 
} 

Answer 1

Die Art, wie dies normalerweise gelöst wird, ist durch Aktualisieren des Status. Wie so:

Fetch:

this.setState({isLoading: true}); 
fetch(url) 
.then((response.json())) 
.then((responseJson) => this.setState({isLoading: false})); 

Dann in Ihrer Methode so etwas wie dies macht:

if (this.state.isLoading){ 
    return this.myLoadingView(); 
} else { 
    return this.myViewWithCompletedData() 
} 

Sobald Abruf das getan wird, wird der Zustand aktualisiert und RN wird klug genug sein, um wieder rende deine Sicht.