Using response.ok For Reliable DOM Rendering
When using a form to add data to a webpage and its database, how can we avoid optimistic rendering without refreshing the webpage or otherwise re-using GET fetch methods? In the past, one of the ways I've personally accomplished this is to send a POST or PATCH at the same time as rendering the corresponding changes in the DOM. Example below:
In this example, this createNewRamen function was invoked when a submit button attached to a form- meant for creating new ramen menu items- was clicked. The function rendered the new ramen in the menu and then sent it to the ramen database. The result was a seamless rendering of the new menu item, and, in this case, the new menu item was successfully stored in our database. However, it is important to note that had the new menu item not been stored in the database, the new ramen would still have been rendered in the menu for the user of the webpage. This second hypothetical case is one we want to avoid. So how can we do that?
One method using the same scenario would be to first send all of the information from the form to our database, then re-render all of the items from the database on our webpage.
This could ensure that we do not render anything on the webpage that does not exist in the database, and avoid the conflict between what a user of the webpage sees and what is actually stored in the corresponding database, but this re-rendering when something is submitted might become cumbersome depending on the use case.
Enter response.ok. The 'ok' here is a read-only property of the response of a fetch request. It contains either true or false depending on whether the response status of the fetch request was in the 200-299 (successful) or not. To put it plainly, if the fetch request was considered successful by HTTP protocol, response.ok will be true. We can use this to our advantage by only rendering new information in the DOM if the response.ok of a POST request is true.
To prove it, I made a form similar to the one used with the createNewRamen function mentioned earlier. Pictured below:
If I use the submission method from the first example--where I simultaneously post the new object to the database and render it in the DOM-- the new item will be represented in the Item Storage even if the database server is offline!
The code above is using the information from the form to send a POST request to the item database, then it's using the same information to render the new item in the DOM.
Here we see the Pug in a Blanket I submitted, so it seems like my submission was successful, but the database has no Pug in a Blanket :(
This time, I want to allow the submission of new items to the item storage pictured above the form, but I only want to render an image representing a new item if the item was successfully posted to the database. We can do that by only invoking the function that renders items in the DOM, only if response.ok is true.
The code above should only invoke the renderItem function (which renders the image submitted in the form) if response.ok is true. It should also console log our response.ok boolean.
It works!
To finally verify that this does what we want it to, I can stop running the mock JSON server and the DOM should not render any new items because response.ok will not be true.
In the above example, when we click create, the DOM does not render the Pug in a Blanket because we did not successfully POST the new item to our database.
That's it! I hope this example of response.ok is useful for somebody out there!
Sources:
Response.ok MDN page:
https://developer.mozilla.org/en-US/docs/Web/API/Response/ok
