DEV Community

Bhavesh Kasturi
Bhavesh Kasturi

Posted on

How to use Fetch API for CRUD operations?

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

fetch api


GET Posts

url - https://jsonplaceholder.typicode.com/posts

get posts

Console

result

CREATE a Post

url - https://jsonplaceholder.typicode.com/posts
methods - POST

create post

UPDATE a Post

url - https://jsonplaceholder.typicode.com/posts
methods - PUT

update post

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

delete post

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 +.

https://github.com/axios/axios

- 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.

https://github.com/visionmedia/superagent

- 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.

https://github.com/visionmedia/supertest

- Qwest

Qwest is a simple ajax library based on promises, and that supports XmlHttpRequest2 unique data like ArrayBuffer, Blob, and FormData.

https://github.com/pyrsmk/qwest


Thanks for reading!

Top comments (2)

Collapse
 
kodra profile image
Draško Kokić

The example for Update (PUT) misses an id in the URL.
BTW, does it really make sense to include code snippets as pictures?

Collapse
 
jinnn0 profile image
Jinyoung Jeong

Hey Bhavesh 🙂 great post! I'm just wondering wouldn't the POST one needs to be specified with post id just like DELETE ?