Friday, May 15, 2020

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 )

No comments:

Post a Comment

React - Makeover in React: W3Schools How To

When it comes to building a React app, I get used to searching for a UI library to build the front pages, a straightforward way to achieve f...