Fetch, CRUD’s Older Brother

Image for post
Image for post
Source: https://miro.medium.com/max/1000/1*P-jeyRwC1AzjfsONEEI1kQ.jpeg

After learning JavaScript in Flatiron School’s Software Engineering Bootcamp, the word “fetch” has taken on an entirely different meaning; it’s no longer solely associated with Mean Girls or playing with my dog. Now I think of it in terms of requesting resources from an API in the browser. We use fetch to retrieve data from, as well as send data to, a server using familiar HTTP methods (i.e., GET, POST, PATCH, and DELETE). Fetch allows us to make requests without slowing down our application, thus maintaining a positive user experience. Fetch does this by functioning asynchronously (via a technique called AJAX — Asynchronous, JavaScript, and XML). AJAX allows us to request data and update the DOM without refreshing the entire webpage. This request is done in the background of the application and does not interfere with the execution of other functions of the page.

GET = Read

The GET method is used to retrieve data from the server. This is a read-only method, so it has no risk of mutating or corrupting the data. For example, if we call the get method on our API, we’ll get back a list of all dogs.

Image for post
Image for post

This GET request to the baseUrl will return all dog objects currently on the server (https://localhost:3000/dogs). As indicated by the second .then, all dog objects (currently in JSON format) will be logged to the console. In order to render the dogs to the page, you would need the additional methods detailed below.

Image for post
Image for post

POST = Create

The POST method sends data to the server and creates a new object (e.g, a new dog). Via our render methods, the object will be appended to the appropriate place on the DOM (in this case as an <li> in the corresponding div). Once the new object is “POSTed” to the parent element, the API service will automatically associate the new resource by assigning it an ID.

Image for post
Image for post

Note: The POST request is wrapped in a submitHandler as a new dog is created when we click the form’s submit button. In order to create a new dog, we also need to pass in the POST request’s method, headers, and body (as an argument of fetch in addition to the baseUrl). Here, they are wrapped in the options function.

PATCH = Update

The PATCH method modifies an existing resource. The body of the PATCH request body only needs to contain the specific changes to the resource you wish to make. This acts as a set of instructions allowing the API to modify the existing resource and create a new version.

Image for post
Image for post

Note: If this were a real application, you would have to apply event delegation in the submit handler to perform the POST and PATCH request (you cannot have more than one submitHandler). In this code, I am submitting a PATCH request to the dog show page (http://localhost:3000/dogs/:id) in order to update a dog’s information. The PATCH request is wrapped in a submitHandler as an existing dog is updated when we click the form’s submit button. Once the form is submitted, the list should reflect the updated dog’s information and that is why we made an additional GET request to re-render all dogs to get the most up-to-date information.

DELETE = Destroy

The DELETE method is used to delete a resource specified by its ID.

Image for post
Image for post

Note: The DELETE request is wrapped in a clickHandler as an existing dog is delete when we click the delete button.

Written by

Graduate of Flatiron School’s Software Engineering Bootcamp as of 12/4/2020. Actively job searching in New York City.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store