30 Days Of React: Fetch and Axios

Twitter Follow Author: Asabeneh Yetayeh
October, 2020
[<< Day 17](../17_React_Router/17_react_router.md) | [Day 19>>]() ![30 Days of React banner](../images/30_days_of_react_banner_day_18.jpg) - [Fetch and Axios](#fetch-and-axios) - [Fetch](#fetch) - [Axios](#axios) - [Exercises](#exercises) - [Exercises: Level 1](#exercises-level-1) - [Exercises: Level 2](#exercises-level-2) - [Exercises: Level 3](#exercises-level-3) # Fetch and Axios ## Fetch Currently, JavaScript provides a fetch API to make HTTP requests. Fetch might not be supported by all browsers therefore we have install addition package for browser supports. However, if we use Axios we do not need to use additional package for browser support. Axios code seems neater than fetch. In this section we will see the difference between fetch and axios. May be if you want to know the browser support of fetch you check out on [caniuse](https://caniuse.com/ciu/index) website. As of today, it has 95.62% browser support. ```js import React, { Component } from 'react' import ReactDOM from 'react-dom' const Country = ({ country: { name, capital, flag, languages, population, currency }, }) => { const formatedCapital = capital.length > 0 ? ( <> Capital: {capital} ) : ( '' ) const formatLanguage = languages.length > 1 ? `Languages` : `Language` console.log(languages) return (
{name}

{name.toUpperCase()}

{formatedCapital}

{formatLanguage}: {languages.map((language) => language.name).join(', ')}

Population: {population.toLocaleString()}

Currency: {currency}

) } class App extends Component { state = { data: [], } componentDidMount() { const url = 'https://restcountries.eu/rest/v2/all' fetch(url) .then((response) => { return response.json() }) .then((data) => { console.log(data) this.setState({ data, }) }) .catch((error) => { console.log(error) }) } render() { return (

React Component Life Cycle

Calling API

There are {this.state.data.length} countries in the api

{this.state.data.map((country) => ( ))}
) } } const rootElement = document.getElementById('root') ReactDOM.render(, rootElement) ``` We can implement async and await and make the above code short and clean. ```js import React, { Component } from 'react' import ReactDOM from 'react-dom' const Country = ({ country: { name, capital, flag, languages, population, currency }, }) => { const formatedCapital = capital.length > 0 ? ( <> Capital: {capital} ) : ( '' ) const formatLanguage = languages.length > 1 ? `Languages` : `Language` console.log(languages) return (
{name}

{name.toUpperCase()}

{formatedCapital}

{formatLanguage}: {languages.map((language) => language.name).join(', ')}

Population: {population.toLocaleString()}

Currency: {currency}

) } class App extends Component { state = { data: [], } componentDidMount() { this.fetchCountryData() } fetchCountryData = async () => { const url = 'https://restcountries.eu/rest/v2/all' const response = await fetch(url) const data = await response.json() this.setState({ data, }) } render() { return (

Fetching API using Fetch

Calling API

There are {this.state.data.length} countries in the api

{this.state.data.map((country) => ( ))}
) } } const rootElement = document.getElementById('root') ReactDOM.render(, rootElement) ``` If we use async and await we handle the error using try and catch. Let's apply a try catch block in the above code. ```js import React, { Component } from 'react' import ReactDOM from 'react-dom' const Country = ({ country: { name, flag, population } }) => { return (
{name}

{name.toUpperCase()}

Population: {population}

Currency: {currency}

) } class App extends Component { state = { data: [], } componentDidMount() { this.fetchCountryData() } fetchCountryData = async () => { const url = 'https://restcountries.eu/rest/v2/all' try { const response = await fetch(url) const data = await response.json() this.setState({ data, }) } catch (error) { console.log(error) } } render() { return (

Fetching API using Fetch

Calling API

There are {this.state.data.length} countries in the api

{this.state.data.map((country) => ( ))}
) } } const rootElement = document.getElementById('root') ReactDOM.render(, rootElement) ``` Now, let's see how to do the same API call using axios. How can do fetch if we have multiple API two call ? ## Axios Axios is a third party package and we need to install it using npm. It is the most popular way to make HTTP requests(GET, POST, PUT, PATCH, DELETE). In this example, we will cover only a get request. ```js import React, { Component } from 'react' import ReactDOM from 'react-dom' import axios from 'axios' const Country = ({ country: { name, capital, flag, languages, population, currency }, }) => { return (
{name}

{name.toUpperCase()}

Population: {population}

>
) } class App extends Component { state = { data: [], } componentDidMount() { const url = 'https://restcountries.eu/rest/v2/all' axios .get(url) .then((response) => { this.setState({ data: response.data, }) }) .catch((error) => { console.log(error) }) } render() { return (

React Component Life Cycle

Calling API

There are {this.state.data.length} countries in the api

{this.state.data.map((country) => ( ))}
) } } const rootElement = document.getElementById('root') ReactDOM.render(, rootElement) ``` Let's also implement the axios fetching using async and await. ```js import React, { Component } from 'react' import ReactDOM from 'react-dom' import axios from 'axios' const Country = ({ country: { name, flag, population } }) => { return (
{name}

{name.toUpperCase()}

Population: {population}

) } class App extends Component { state = { data: [], } componentDidMount() { this.fetchCountryData() } fetchCountryData = async () => { const url = 'https://restcountries.eu/rest/v2/all' try { const response = await axios.get(url) const data = await response.data this.setState({ data, }) } catch (error) { console.log(error) } } render() { return (

React Component Life Cycle

Calling API

There are {this.state.data.length} countries in the api

{this.state.data.map((country) => ( ))}
) } } const rootElement = document.getElementById('root') ReactDOM.render(, rootElement) ``` As you have seen, there is no much difference between fetch and axios. But I recommend you to use more axios than fetch because of browser support and easy of use. # Exercises ## Exercises: Level 1 1. What is HTTP request? 2. What are the most common HTTP requests? 3. What is fetch? 4. What is axios? 5. What is the difference between fetch and axios? 6. Do you prefer fetch to axios for make HTTP requests? ## Exercises: Level 2 1. Find the average metric weight and life span of cats in the following [API](https://api.thecatapi.com/v1/breeds). There are 67 breeds of cats in the API. ![Average cat weight and age](../images/average_cat_weight_and_age.png) ## Exercises: Level 3 1. How many countries do have cat breeds? 2. Which country has the highest number of cat breeds? 3. Arrange countries in ascending order based on the number of cat breeds they have? 🎉 CONGRATULATIONS ! 🎉 [<< Day 17](../17_React_Router/17_react_router.md) | [Day 19>>]()