FETCH API

As we all know browsers are very powerful, fetch API is part of the browser which can be accessed by using JavaScript

Intro

Fetch API is used to make network requests over the server. The return value of the fetch API is a promise which is in the pending state. Hence the fetch API works asynchronously and helps us to make requests to the server over the network

Steps Involved While Using Fetch

1. Make the network call using the fetch() function
2. This will return a promise and on successful resolution of the promise we will get a response object
3. Response object has many parts, the part of the response object that we are interested in is the data part or the body of the response. For more information about the response, objects refer: developer.mozilla.org/en-US/docs/Web/API/Re..
4. We need to extract that and convert it into a suitable form like text, blob for an image or JSON

Parameters passed inside of fetch

1. The first parameter passed inside of fetch is always the path or the address from where we want to fetch data. If files are locally hoisted then this path will directly be the address and if not then it will be a URL of the address.
2. The second parameter is optional

URL

The URL can directly be a string or it can be an url object For more info about URLs refer: developer.mozilla.org/en-US/docs/Web/API/URL

Understanding the parts of a URL

Example bob@www.prof3ssorst3v3.github.io/url-parts

Communication Protocol Generally HTTPS, can be HTTP, FTP Username: bob@ SubDomain: Generally www Domain: GitHub Super Domian: ca,in,info,edu,etc Folder Path: Every Webpage will e present on a server and a server is a file system, the folder path will Indicate which folder to access ---> /URL-parts File path: In the folder which files to access Hash: Id of an HTML element QueryString: A query string is a set of characters input to a computer or Web browser and sent to a query program to recover specific information from a database. On the Internet, a query string (also called an HTTP querystring) is part of the set of characters automatically input in the address bar of a dynamic Web site when a user makes a request for information according to certain criteria.

In a URL (Uniform Resource Locator), the query string follows a separating character, usually a question mark (?). Identifying data appears after this separating symbol. For example, consider the following URL:

bookfinder4u.com/search_author/Ernest_Hemin..

This produces a list of all the books available from the online bookseller BookFinder4u bearing the author's name Ernest Hemingway, in reverse chronological order by publication date. The query string in this example consists of one field or variable, technically called a key in this context (here, it is the word "sort"), followed by an equals sign (=), followed by the value for that key (here, it is the word "date"). Each key and its corresponding value denoted as an equation is called a key-value pair. A query string may contain several key-value pairs. When there is more than one key-value pair, they are typically separated by ampersands (&)

These are key-value pairs always.

An alternative to using query string is The URLSearchParams interface defines utility methods to work with the query string of a URL.

Some Important Properties Of The Response Object

If we dont know the type of response ,to find the type of response we can write

resonse.headers.get('content-type')

Performing A post request using fetch API