What is CRUD Operation?
The acronym CRUD stands for Create, Read, Update and Delete.
Create: Inserts a new data
Read: Read the data
Update: Update the existing data
Delete: Delete the existing data
List of HTTP Request methods
GET - is used to request data from a specified resource.
POST - is used to send data to a server to create a resource.
PUT - is used to send data to a server to update a resource.
DELETE - is used to delete the specified resource.
What is REST API Server
If you're performing CRUD operation using Fetch API you're going to need a REST API server
For learning purposes we can use jsonplaceholder
JSONPlaceholder is a free online REST API that you can use whenever you need some fake data. It's great for learning, tutorials, testing new libraries, sharing code-examples.
Fetch API
GET Posts
url - https://jsonplaceholder.typicode.com/posts
Console
CREATE a Post
url - https://jsonplaceholder.typicode.com/posts
methods - POST
UPDATE a Post
url - https://jsonplaceholder.typicode.com/posts
methods - PUT
DELETE a Post
url - https://jsonplaceholder.typicode.com/posts/0
0 is a post id, so we are going to delete a post where the id = 0
methods - DELETE
JS HTTP Request Libraries
To help make our experience with AJAX and XMLHttpRequest a nice one. Libraries have been developed to help us make HTTP requests without dealing with complexities of AJAX and XMLHttpRequest.
- Axios
Promise based HTTP client for the browser and node.js
This is a Promise-based HTTP library for performing HTTP requests on both Nodejs and Browser. It supports all modern browser, even an included support for IE8 +.
- SuperAgent
This is a Promise-based light-weight progressive AJAX API perfectly suited for sending HTTP requests and receiving server responses. Like axios, it works in both Node and in all modern browsers.
- Supertest
Super-agent driven library for testing node.js HTTP servers using a fluent API
This is used for testing Node.js HTTP servers. This library is powered by SuperAgent, it combines its own API and the lower-level API provided by SuperAgent to provide a neat interface for testing HTTP.
- Qwest
Qwest is a simple ajax library based on promises, and that supports XmlHttpRequest2
unique data like ArrayBuffer, Blob, and FormData.
Thanks for reading!
Oldest comments (2)
Hey Bhavesh 🙂 great post! I'm just wondering wouldn't the POST one needs to be specified with post id just like DELETE ?
The example for Update (PUT) misses an id in the URL.
BTW, does it really make sense to include code snippets as pictures?