fetch API in JS

The fetch() is a global method on the window object, that allows us to send web requests to the API, and retrieves a collection of data, structured in a nested hash, known as JSON. In JavaScript, fetch is built-in, it allows you to query any URL or API to get back data.

Basic fetch Structure

The fetch uses javascript promises to handle callbacks. Here is the basic structure of the fetch() function:

fetch(`Use URL of the data source`)
.then((response)=> {
  return response.json();
}).then((json) => {
  console.log(json)
})

The fetch() function with the API URL above returns an object that holds the data source you’re requesting. Call the .then() method, take the response, and fetch will return to us a response. Next, you must call the .json() method on the response to render the API’s response as JSON; this will return a promise. The second.then() receives the data and passes the Javascript object, with keys and values. Every .then() returns a new promise; passing information from one promise to next .then() is whatever you’ve returned in the previous .then().

I make a request, which is basically a promise. My promise is when I get back from the server I’ll give you something. When the promise is done you’ll get the response. You can turn that response from a string into Javascript.

Requests

With fetch() you want to do more than just get data from the server. You can post, delete, and update data to the server. In order to do so, you need to add a second parameter to the fetch method and use an HTTP request method.

HTTP Request Type:

• GET - display a list of all the data
• GET — display specific data (`/:id`)
• POST - create a data
• PUT - update a specific article
• DELETE - delete a specific article

The second parameter is an object, which has different keys. For the purpose of this blog, the key method I will be using is POST .

fetch('https://tanukadas.com/some_blogs', {
  method: 'POST'	
})

Request Headers

Next, we need to add headers. Headers are basically the information you send to the browser. Its how you communicate with the server, describing the transaction you’re about to do. Inside the header object, set the 'Content-Type' to 'application/json'. It mentions the content it will send, in this case, its JSON and the content it accepts back is JSON. That’s the type of conversion we’re having with the headers.

fetch('https://tanukadas.com/some_blogs', {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
  }
})

The other kind of content you can send are text/javascript, text/html, text/css, text/plain etc. Check out the following link if you want to learn about the different types of content.

MIME types (IANA media types)

Body

The next step is to pass the data of the blog (example used here) in the body. Pass it as JSON; give the blog a name, in this case, blog_4 is the name. It is important to set it as JSON.stringify, stringify the object you’re passing in.

fetch('https://tanukadas.com/some_blogs', {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
  },
  body: JSON.stringify({name: 'blog_4'})
})

Whenever you post JSON data to the server, be aware to set the header to correct content type, and stringify the body. Basically you cannot just send a Javascript object, you must convert it to JSON string.

So far, this function is only sending a fetch request, it is not dealing with the response yet. In order to grab the response from the fetch, call the .then method and that will return another promise.

fetch('https://tanukadas.com/some_blogs', {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
  },
  body: JSON.stringify({name: 'blog_4'})
}).then((response)=> {
  return response.json();
}).then((blogData) => {
  console.log(blogData)
})

This function makes a fetch, posts a specific blog, with the right name. Then it gets the response, converts it into Javascript, and console logs the data posted.

Previous posts:

How to Make Your LinkedIn Profile Stand Out & Get Better Opportunities in 2020?

How to Create Simple Forms in React?

How To Solve Loop Detection Interview Question? | Crack The Coding Interview (6th edition)

Markdown — A Easier & Fast to Learn Markup Language

Data Structure — Linked List| SINGLY LINKED LIST PRACTICE(LeetCode)

Debug JS Code with DevTool Network Tab

Host a Website on GitHub

Deploying React App to GitHub pages

Set up Rails Controller

Set up Rails Model

Rails API From Scratch

Rails Flash Hash

Components architecture — React.js