Fetch -- HTTP requests

HTTP Requests

Overview HTTP

HTTP stands for Hypertext Transfer Protocol and is used to structure requests and responses over the internet. HTTP requires data to be transferred from one point to another over the network. TCP channel is the primary means of making these connections. Here is an article that goes into a pure vanilla HTTP server with no abstractions Article Vanilla Server.

There is nothing wrong with doing things this way. It is just a lot more code and you might need to have a deeper understanding of networks and how HTTP works, and XMLHttpRequests
Needless to say I rather abstract these things, and learn them over time or when I absolutely need to know it.

Vanilla Request Example

I tried to make this a small example of XHR vanilla, no HTTP libraries, but not overcomplicated, hopefully, highlight the usefulness of Fetch later on.

const XHR = new XMLHttpRequest();

XHR.onload = function XHRcall() {
  try {
    if (XHR.status >= 200 && XHR.status < 300) console.log(`success!`, XHR.response);
  } catch (error) {
    console.log(`The request failed!`, error);
  }
};
// Create and send a GET request
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
// The second argument is the endpoint URL
XHR.open(`GET`, `https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699`);
XHR.send();

This should work pasting directly in the browser console.
Here is my own implementation in the browser console. I modified the code snippet so that console logging the constructed XHR object isn't unnecessary, just copy and paste into snippet into the browser console. 😁

Where Fetch Comes in...

Are there other options? absolutely! Axios, superagent, Request... to name a few. They all have their pros and cons. If I were to choose something other than Fetch it would be Axios, a promised based client that is featureful. Why choose to use fetch then? A big benefit is that it is a native Browser API, therefore, supported thoroughly across many browsers. Well, fetch originally was only usable in the frontend (browser side), however, node-fetch exists for using Fetch in Node.js and now you can use it seamlessly in the frontend or backend.

Overview of Fetch & Benefits

• It’s flexible, and extremely well documented.
• It has a sleek and clean syntax.
• Able to utilize promises or async/await with it. (I prefer async/await)
• Supported by most if not all modern browsers.
• Follows the request-response approach.

Fetch Example

import fetch from "node-fetch";

// More configs can be added to the headers from the 2nd argument object.
// Here I just explicitly set method to GET request. 
const response = await fetch(
  `https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699`,
  { method: `GET` }
);
const myJson = await response.json();
console.log(JSON.stringify(myJson));

I managed to run it locally, in a small Nodejs example.

🚧 🚧 🚧 To Be Continued...? 🚧 🚧 🚧
🚨 Follow up to this article I might add creating a small JSON express server and using Fetch to GET & POST data to the "endpoints" to show at least the requests in direct action. 🚨