React - How to Consume REST Services by Using Axios?

1. Install Axios

Before use axios, we first need to install it in the development environment where we have Node installed beforehand.
The npm command to install axios is shown as below.

    npm add axios

2. Call REST APIs via Axios

To use axios, it is required to be imported in the .js file. Below is the import syntax.

    import axios from 'axios';

Here I use EndpointURL to represent the HTTP URL for REST APIs, use resource to indicate the object, and use resourceId as the unique identifier of the object.

2.1 Fetch Resource

Below is the snippet of codes for fetching a list of resources.

    fetchResources(){
        return axios.get( EndpointURL );
    }

Codes for fetching a resource by using its unique identifier.

    fetchResourceById( resourceId ){
        return axios.get( EndpointURL + '/' + resourceId );
    }

2.2 Add Resource

Codes for adding a new resource.

    addResource( resource ){
        return axios.post( EndpointURL, resource );
    }

2.3 Update Resource

Codes for updating a specified resource.

    updateResource( resource ){
        return axios.put( EndpointURL + '/' + resource.id, resource );
    }

2.4 Delete Resource

Codes for deleting a given resource.

    deleteResource( resourceId ){
        return axios.delete( EndpointURL + '/' + resourceId );
    }


The above calls are stored in a component called RestServices which is exported by using the below statement.

    export default new RestServices();

3. Use the Services in React Component

Below is the import statement for importing the services component.

    import RestServices from "./RestServices";

Now you can use the REST APIs for operations by simply calling them.

3.1 Load Resources

Load the list of the resources and store them in a local object called resources.

    loadResourceList() {
        RestServices.fetchResources()
            .then(response => {
                this.setState({resources: response.data, message: response.statusText})
            });
    }

A component in React has a 3-phase lifecycle, The 3 phases are mounting, updating and unmounting. During mounting phase, all elements are put into the DOM.

componentDidMount is a method in mounting phase called right after the component is rendered. You can place the fetch method within componentDidMount, so that you can view the list when you open the page.

    componentDidMount() {
        this.loadResourceList();
    }

Load a specified resource and save it in the state object.

    loadResource() {
        RestServices.fetchResourceById( resourceId )
            .then((response) => {
                let resource = response.data;
                this.setState({
                    id: resource.id,
                    property1: resource.property1,
                    property2: resource.property2
                })
            });
    }

3.2 Add/Update Resource

First, get the data from the state object.
To add a new resource, call RestServices.addResource( resource ).
To update an existing resource, call RestServices.updateResource( resource ).

Below is an example for new source addition.

    newResource = (e) => {
        e.preventDefault();
        let resource = { property1: this.state.property1, property2: this.state.property2 };
        RestServices.addResource( resource )
            .then(res => {
                this.setState({message : 'Resource added successfully.'});
            });
    }

3.3 Remove a Resource

To remove a resource, simply call the API to delete it.

    RestServices.deleteResource( resource.id )