Fetch, CRUD’s Older Brother
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.
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.
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.
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.
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.
Note: The DELETE request is wrapped in a clickHandler as an existing dog is delete when we click the delete button.
