September 23, 2021
Frontend developers will inevitably need to make HTTP requests frequently when building out the client-side of a full-stack app. Having a solid understanding of these methods and how to build the requests is essential in being a top-shelf frontend developer.
There are four main HTTP methods that a good frontend developer will know like the back of their hand:
The GET method is fairly self-explanatory - use it when the app needs to retrieve information from the API. GET requests can have parameters added that will allow the API to filter the data returned based upon the parameter value.
The parameters can be added to the API URL as query string parameters or added to the overall requests in a params object, depending on the HTTP helper package you may be using.
The POST method is used when the client app needs to send data to the API for the purpose of a completely new entry being created in the database. Examples of this would be when a new user creates an account in your app and then when that user creates their first entity in the app.
The PUT method is used to update an existing database entry. It is similar to the POST in that the HTTP request sends a body argument that is the object of data to be used to update the existing record.
An example of this would be the same user above going to the settings section of your app and updating their username and email address. These two values are then sent to the API along with a unique ID to find the record and the API then updates the existing record with the new username and email address.
Again, similarly to the GET requests, the DELETE request is fairly self-explanatory. The DELETE Method is used to remove an entry from the application database. Generally, the delete action performed by the API is more complicated than simply deleting an entry as foreign key mappings need to be maintained or deleted accordingly to ensure data integrity is retained. From the frontend, however, it is not likely you’ll need to worry with more than sending the correct ID of the main data entity to be deleted.
The HTTP DELETE request also accepts a body object, but it specifically requires that this object has a data property that contains the information about the entity to delete.
Blog by Mick Patterson