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!
Top comments (2)
The example for Update (PUT) misses an id in the URL.
BTW, does it really make sense to include code snippets as pictures?
Hey Bhavesh 🙂 great post! I'm just wondering wouldn't the POST one needs to be specified with post id just like DELETE ?