How does the fetch method work

DISCLAMER:

• This series simplifies how stuff work to give you an idea of what to expect but this is not the actual code and I will include the actual docs of the steps of how stuff work with each part of this series for the super nerds out there.

• If you want to know more about something or how it actually works write a comment and I might just do it.

what is the fetch method?

The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.

How it works:

first of all we need to dissect the fetch method to understand it

we know that it takes an API string URL as a parameter
and returns a Promise

so let us implement that

function fetch2(API)
  return new Promise(resolve => {

});

Yaaay we did it!

not that fast we now need to know what happens to the API string

the fetch transforms the URL with the options if any to a Request object

You can actually pass a Request object directly.

and after that the fetch runs the Request and receives a Promise that gets resolved to a Response Object

And this is how it resolves the promise.

Remember the fetch2 function up there let us continue the implementation

function fetch2(API)
  const Response = someMagicalService(Request(API))
  return new Promise(resolve => {
   const interval = setInterval(() =>{
     if(Response.status){
      clearInterval(interval);
      resolve(Response);
     }
   }, 100)
});

the fetch keeps checking the status of the response and when a status comes the interval "Response checking" stops and the promise is resolved.

the someMagicalService part can be broken apart to multiple lines but for simplicity I just called it that

Do not forget to comment with any topic that you want to know about in some detail - as long as it is related to (JS, ReactJS) -

And leave a Heart & follow if you want to read more articles like this

References:
Fetch