Axios

Axios is a library that performs the same task as the AJAX fetch() function. Although it is possible to use either Axios or fetch() when working with Node.js, Axios is usually used.

In order to use Axios, we need to install Axios on the command line.

npm install -g axios

Below are two coding segments that show the comparison between using fetch() and Axios to read a json data file called cars.json.

cars.json

[
    {
        "_id": 0,
        "model": "Avensis",
        "colour": "Red",
        "year": 2020,
        "price": 30000
    },
    {
        "_id": 1,
        "model": "Yaris",
        "colour": "Green",
        "year": 2010,
        "price": 2000
    },
    {
        "_id": 2,
        "model": "Corolla",
        "colour": "Red",
        "year": 2019,
        "price": 20000
    }
]

The code below uses the AJAX fetch() method to read the cars.json data and to use the returned JSON data to set a component's state property called cars.

    //  Using AJAX fetch()
    
    fetch("json/cars.json" )
    .then(ressponse => response.json())
    .then(jsonData => 
    {   
        this.setState({cars:jsonData})
    })

Using Axios, the fetch() code above can be written as:

    //  Using axios

    axios.get("json/cars.json")
    .then(res => 
    {
        this.setState({cars: res.data})
    })

In order to use axios in a component, we need to import axios into it, as shown in the code below:

client/src/components/SomeComponent.js

...


import axios from "axios"


...

Open the react_routing project from the last section of these notes. Create a new file called client/public/json/cars.json and place the code below into it.

client/public/json/cars.json[
    {
        "_id": 0,
        "model": "Avensis",
        "colour": "Red",
        "year": 2020,
        "price": 30000
    },
    {
        "_id": 1,
        "model": "Yaris",
        "colour": "Green",
        "year": 2010,
        "price": 2000
    },
    {
        "_id": 2,
        "model": "Corolla",
        "colour": "Red",
        "year": 2019,
        "price": 20000
    },
    {
        "_id": 3,
        "model": "Avensis",
        "colour": "Silver",
        "year": 2018,
        "price": 20000
    },
    {
        "_id": 4,
        "model": "Camry",
        "colour": "White",
        "year": 2020,
        "price": 50000
    }
]

Once you have done the above, change the code in client/src/components/DisplayAllCars.js so that the JSON data is read from the above file.

"Cars" Worked Example

The full project code for the "Cars" Worked Example that is described below can be downloaded from this link.

This example places the cars JSON data into a file called cars.json, which is stored in the folder client/public/json/cars.json

Client-Side

client/public/json/cars.json

[
    {
        "_id": 0,
        "model": "Avensis",
        "colour": "Red",
        "year": 2020,
        "price": 30000
    },
    {
        "_id": 1,
        "model": "Yaris",
        "colour": "Green",
        "year": 2010,
        "price": 2000
    },
    {
        "_id": 2,
        "model": "Corolla",
        "colour": "Red",
        "year": 2019,
        "price": 20000
    },
    {
        "_id": 3,
        "model": "Avensis",
        "colour": "Silver",
        "year": 2018,
        "price": 20000
    },
    {
        "_id": 4,
        "model": "Camry",
        "colour": "White",
        "year": 2020,
        "price": 50000
    }
]

Note that the cars.json file must be held in the client/public folder. Otherwise, the React Component's code will be denied access to it.

client/src/components/DisplayAllCars.js

import React, {Component} from "react"

import axios from "axios"

import CarTable from "./CarTable"


export default class DisplayAllCars extends Component 
{
    constructor(props) 
    {
        super(props)
        
        this.state = {
            cars:[]
        }
    }    


    componentDidMount() 
    { 
        axios.get("json/cars.json")
        .then(res => 
        {
            if(res.data)
            {
                this.setState({cars: res.data})                    
            }
            else
            {
                console.log("Records not found")
            }      
        })                       
    }


    render() 
    {   
        return (           
            <div className="form-container">
                <div className="table-container">
                    <CarTable cars={this.state.cars}/> 
                </div>
            </div> 
        )
    }
}

When the component mounts, it reads the data from the file cars.json and use the returned data (res.data) to set the state of the Component's cars property.

    componentDidMount() 
    { 
        axios.get("json/cars.json")
        .then(res => 
        {
            if(res.data)
            {
                this.setState({cars: res.data})                    
            }
            else
            {
                console.log("Records not found")
            }      
        })                       
    }

If there is an error message as a result of a problem with the Axios call, then the error

Server-Side

The Axios library is only called from the client-side. In this example, the cars.json file is also stored on the client-side. Therefore, there are no changes to be made on the server-side.