REST APIs are commonly used in web development. They are programming interfaces that web apps use to 'talk' to each other. They are used to access features and data. 'REST' (Representational State Transfer) is a concept that defines the APIs properties. This article will focus on the use of web-based APIs to retrieve data from a database. Axios is an npm package that allows apps to send HTTP requests to web APIs. To use Axios within your React app, use the following commands: npm install axios or yarn add axios Before creating the react component, import React and Axios into the file as follows: React ; axios ; import from 'react' import from 'axios' Axios requests were utilised within the React lifecycle method 'componentWillMount'. Although this method has since been deprecated, it is still available for use at the time of this writing. It will continue to be until the release of React 17. It isn't considered safe for use when asynchronous rendering is required. In its place, you should use the method 'componentDidMount'. This method runs after the component has been updated to the DOM, and is a good place to register API calls. The basic structure this far is as follows: { (props) { (props); .state = { : []
    }
  }
  componentDidMount() { }

  render() { ( );
  }
} . class YourComponent extends React Component constructor super this posts // Your axios request here return //  Your jsx goes here Axios requests have the following basic structure: axios({ : , : }); method 'http request method' url 'Api url' As seen above, basic requests take an object as an argument. In that object, method and URL keys are specified. The HTTP request method type and the API URL are set as their respective values. GET Requests With this basic pattern in mind, an Axios GET request would be as follows: apiUrl = ;

axios({ : , : }); const 'https://your-api.com/' method 'get' url ` ` ${apiUrl} When API receives the request and processes the request, a response is sent. The component will need to handle the data received in some way before it can be used in the app. In this example, we defined a key in our state, named 'posts' and set it equal to an empty array. Axios requests are asynchronous. We need to handle the response by chaining 'then' on to the end of the request. Inside the then block, we can update the component's state as follows: axios({ : , : })
  .then( { .setState({ : response.data
    })
  }); method 'get' url ` ` ${apiUrl} => response this posts (PS. if we were utilising redux for state management, we could call a dispatch function in the 'then' block. That way, we can save the response data in the redux store). POST Requests In the case of a typical POST request, data is passed along with the API request. This data usually can reside either in the component's state or a redux store. Usually, the data that the user wishes to post to the database is obtained from a form.  We would update the component's state with the handleChange function. Our Axios request would be made in the handleSubmit function. When the form is submitted, a POST request is sent to the API. This can be done as follows: { (props) { (props); .state = { : }
  }

  handleChange(e) { { value } = e.target; .setState({ : value
    });
  }
  
  handleSubmit(e) {
    e.preventDefault(); { post } = .state;
  
    axios({ : , : , : post
    })
  }

  render() { ( );
  }
} . class YourComponent extends React Component constructor super this post '' const this post const this method 'post' url ` /posts` ${apiUrl} data return //  Your form resides here DELETE Requests DELETE requests are similar to POST requests. They are made upon interaction with a button in the view. In this case, a handleClick function can be employed to make the request when a 'delete' button is clicked. This can be done as follows: { (props) { (props); .state = { : [
        { : , : }
      ]
    } .handleClick = .handleClick.bind( );
  }
  
  handleClick(e) {
    e.preventDefault(); { id } = e.target; apiUrl = ;
    
    axios({ : , : })

  }

  render() { { posts } = .state; ( <div key={post.id}>
            <p>{post.content}</p>
            <div>
              <input 
                type="button"
                id={post.id}
                value="Delete"
                onClick={this.handleClick}
              />
            </div>
          </div>
        ))}
      </div> . class YourComponent extends React Component constructor super this posts id 1 content 'The first post' this this this const const 'https://your-api.com/' method 'delete' url ` /posts/ ` ${apiUrl} ${id} const this return {posts.map(post => ( < > div );
  }
} Once the button is clicked, the DELETE request is sent to the api and the post is removed from the database. For this to be reflected on the front-end, another GET request has to be sent to update the component's state. Requests with JWT JWT (JSON Web Tokens) can be used to authenticate users in web-based applications. These tokens are usually generated by sending a POST request to a properly configured API. Once the token is generated, they are stored for use via localStorage. In such a case, the token would need to form part of the HTTP request made. To illustrate this, we'll revisit the GET request example: apiUrl = ; token = ;

axios({ : , : , : { : token }
}); const 'https://your-api.com/' const `Bearer ` ${localStorage.getItem( )} 'jwt' method 'get' url ` ` ${apiUrl} headers Authorization The token is passed as another key in the object argument passed to the Axios call. POST and DELETE requests can be altered in a similar fashion with the token being passed in via a 'headers' key. And there you have it. This was a very concise look at Axios requests in react front-end components.

Super

How to Handle REST API Requests in React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Get To Know Prime: The Ruby Class For Sustaining Prime Numbers

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Get To Know Prime: The Ruby Class For Sustaining Prime Numbers

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps