How to use Fetch API for CRUD operations?
Tags: webdev, api, react
Published: 2020-06-01 08:00:05

# **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](https://jsonplaceholder.typicode.com/)

**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](https://lh6.googleusercontent.com/NsRmwChD7uCgqPmXa7sc7_vDRPawh9Hp5m3bstvZWm7-uXSie86zvXv2nW_fJYPmN6fbFTvJ4lKecw=w1366-h625-rw)

---------------------------------------------------------------------------

## **GET Posts**
**_url_** - https://jsonplaceholder.typicode.com/posts

![get posts](https://lh6.googleusercontent.com/bxL2LbkkSTlH4guc8aTGL1JGqhWylpOmMXkvt8jivWc6dojXsG5Rx4mqQorIUyWyoTAB2okKINPHbA=w1366-h625-rw)

### Console
![result](https://lh4.googleusercontent.com/5sL3e63Ee1aR8nIYC021GABcb1J_OpG_BabZLwIRsSPK8RGAt238TOVMwDyUfkjYVNKc8CDZSf8qDQ=w1366-h625)

## **CREATE a Post**
**_url_** - https://jsonplaceholder.typicode.com/posts
**_methods_** - POST

![create post](https://lh5.googleusercontent.com/_dRQkVtC43_H3SgH_Kns6vppM-wGTPD5sKdId2tIil-86dgsAVIQawpMvIFkcgDYHEsZWAr-H-Phvg=w1366-h625-rw)

## **UPDATE a Post**
**_url_** - https://jsonplaceholder.typicode.com/posts
**_methods_** - PUT

![update post](https://lh5.googleusercontent.com/Nwpb20sVJwonf9AdEPx0DzGYPzU1MNQDvbI5ga6dFUWMxudWUXKQe8IjQE_dmVwQqhjsUl13KvG2mQ=w1366-h625-rw)

## **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](https://lh4.googleusercontent.com/BzHo9nqPqVSksdfYa--2-e7tH1q26Sn9GaQzoGTW1h13I60dlrXkPQfe8mKXLPdXwWzVWLVBMWXa7w=w1366-h302-rw)


## **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!**_