Last Updated on December 13, 2020.
In an earlier post I have written how to do api calls in react native with axios library. In this blog post, I show you how to use async and await in react native with axios.
The following code is from previous blog post and in that I use axios to call api from coindesk to check Bitcoin price in multiple currencies.
import React, { Component } from 'react';
import axios from 'axios';
import {View,Text} from 'react-native';
const URL = 'https://api.coindesk.com/v1/bpi/currentprice.json';
class App extends Component {
constructor(props) {
super(props);
this.state = {
inDollars: '',
inEuro: '',
inPounds: '',
};
}
componentDidMount() {
axios.get(URL).then(response => response.data)
.then((data) => {
this.setState({
inDollars: data.bpi.USD.rate,
inEuro: data.bpi.EUR.rate,
inPounds: data.bpi.GBP.rate,
});
});
}
render() {
const { inDollars, inEuro, inPounds } = this.state;
return (
<View style={{justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'black'}}>Price of 1 Bitcoin</Text>
<Text>
USD:
{' '}
{inDollars}
</Text>
<Text>
EURO:
{' '}
{inEuro}
</Text>
<Text>
GBP:
{' '}
{inPounds}
</Text>
</View>
);
}
}
export default App;
Using async and await make functions asynchronous while handling promises. We can change the componentDidMount lifecycle from above example as given below:
async componentDidMount() {
const response = await axios.get(URL);
const data = response.data;
this.setState({
inDollars: data.bpi.USD.rate,
inEuro: data.bpi.EUR.rate,
inPounds: data.bpi.GBP.rate,
});
}
If we want to leave componentDidMount from async then we can use another function with async/await.
callApi= async() => {
const response = await axios.get(URL);
const data = response.data;
this.setState({
inDollars: data.bpi.USD.rate,
inEuro: data.bpi.EUR.rate,
inPounds: data.bpi.GBP.rate,
});
}
Now the full code with async/await using axios and react native will be as given below:
Class based component
import React, { Component } from 'react';
import axios from 'axios';
import {View,Text} from 'react-native';
const URL = 'https://api.coindesk.com/v1/bpi/currentprice.json';
class App extends Component {
constructor(props) {
super(props);
this.state = {
inDollars: '',
inEuro: '',
inPounds: '',
};
}
componentDidMount() {
this.callApi();
}
callApi= async() => {
const response = await axios.get(URL);
const data = response.data;
this.setState({
inDollars: data.bpi.USD.rate,
inEuro: data.bpi.EUR.rate,
inPounds: data.bpi.GBP.rate,
});
}
render() {
const { inDollars, inEuro, inPounds } = this.state;
return (
<View style={{justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'black'}}>Price of 1 Bitcoin</Text>
<Text>
USD:
{' '}
{inDollars}
</Text>
<Text>
EURO:
{' '}
{inEuro}
</Text>
<Text>
GBP:
{' '}
{inPounds}
</Text>
</View>
);
}
}
export default App;
Function based component
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {View, Text} from 'react-native';
const URL = 'https://api.coindesk.com/v1/bpi/currentprice.json';
const App = () => {
const [inDollars, setInDollars] = useState('');
const [inEuro, setInEuro] = useState('');
const [inPounds, setInPounds] = useState('');
const callApi = async () => {
const response = await axios.get(URL);
const data = response.data;
setInDollars(data.bpi.USD.rate);
setInEuro(data.bpi.EUR.rate);
setInPounds(data.bpi.GBP.rate);
};
useEffect(() => {
callApi();
}, []);
return (
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Text style={{color: 'black'}}>Price of 1 Bitcoin</Text>
<Text>USD: {inDollars}</Text>
<Text>EURO: {inEuro}</Text>
<Text>GBP: {inPounds}</Text>
</View>
);
};
export default App;
Following is the output of the above react native axios example.
