In this tutorial we will implement a JavaScript fake API. Often this helps whenever there is no backend yet and you need to implement your frontend against some kind of realistic data. Fake it till you make it!
Letâs get started. First of all, we need some data which would normally come from our backendâs database, but which will just come from a JavaScript file in our case:
Next we need unique identifiers, which arenât important with only two items in the fake database, but which are important for creating more items eventually:
You can install the library with npm install uuid from over here . Our fake database is complete now.
Now we will move on with our fake API. Therefore we will follow the CRUD pattern for creating, reading, updating and deleting entities from our fake database via our fake API. First, we need to retrieve all items from the database with one pseudo API request:
This function returns our object of items as an converted array. However, itâs just a function which returns data synchronously. In order to fake an API, it would need to be asynchronous. Therefore, we will wrap it into a JavaScript promise:
Instead of using the previous shorthand promise version, we will use the longer version:
The longer promise version enables us to handle errors too:
Last but not least, we want to introduce a fake delay to make our fake API realistic:
Thatâs it. Calling this function feels like a real API request, because itâs asynchronous (JavaScript promise) and has a delay (JavaScriptâs setTimeout ). After we went through this first API step by step, we will continue with the other CRUD operations now.
A traditional REST API can be seen to analogous to CRUD operations very well. Thatâs why we will implement the following API with REST in mind, by offering API endpoints for reading item(s), creating an item, updating an item, and deleting an item. Before we already implemented reading multiple items:
Next, we will implement the equivalent for reading a single item; which is not much different from the other API:
Next, creating an item. If not all information is provided for the new item, the API will throw an error. Otherwise a new identifier for the item is generated and used to store the new item in the pseudo database:
Next, updating an item. If the item is not found, the API will throw an error. Otherwise the item in the object of item will be updated:
And last but not least, deleting an item. Same as before, if the item cannot be found, the API returns an error. Otherwise we only get the confirmation that the item has been removed from the object of items:
We have implemented the entire fake API for a RESTful resource (here user resource). It includes all CRUD operations, has a fake delay and returns an asynchronous result. For the write operations, the API only returns an acknowledgment (boolean), however, you could also decide to return an identifier (e.g. identifier of the removed item) or an item (e.g. the created/updated item).