How to use Fetch API for CRUD operations?

#webdev #api #react

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

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.