How to use Async and Await with Axios and React Native

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.