React > expo > Axio > Async do not wait for response - reactjs

Question

I am a real dummy on expo and react.
I am trying to fetch infos API using AXIO.
My problem is that before the API request is finish, expo is asking for a return statement.
Here is my code :
const sendGetRequest = async () => {
try {
const resp = await axios.get(uri, {
auth: {
username: '*****',
password: '****'
}})
console.log(resp.data);
return (
<View style={styles.container}>
<Text style={styles.title}>Action</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<Text>
Order ID: {resp.data.id}
Nom client: {resp.data.billing.first_name} {resp.data.billing.last_name}
</Text>
<EditScreenInfo path="/screens/TabTwoScreen.tsx" />
</View>
);
} catch (err) {
// Handle Error Here
console.error(err);
}
};
sendGetRequest();
ANd I get this error :
" Nothing was return from render "
I guess that the await is not really awaiting the result of the async..
Can you help me to see where is my mistake???
Thanks you so much..
Regards,
Pierre

Answer 1

Pierre, try to add await before calling sendGetRequest();
Like this:
await sendGetRequest();

Answer 2

ok I found the solution to my problem.
I spent couple of usefull minutes to read more about promises and callbacks.
I was wrong thinking that a promise will hold the code until it get a response. When u understand that a promise send a callback once realized the right code is as following :
// Creating a "DOM listener" -> sorry about vocabulary
const [myText, setMyText] = useState("My Original Text");
// Creating the async/awaiting function
const sendGetRequest = async () => {
try {
var resp = await axios.get(uri, {
auth: {
username: '*******',
password: '*******'
}});
await setMyText('Nom du client:'+ resp.data.billing.first_name);
} catch (err) {
// Handle Error Here
console.error(err);
}
};
sendGetRequest();
// AND RETURN THE HTML AS FOLLOW
<View>
<Text onPress = {() => setMyText("My Changed Text")}>
{myText}
</Text>
</View>