DEV Community

Cover image for How does the fetch method work
ahmedgaafer
ahmedgaafer

Posted on

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 => {

});
Enter fullscreen mode Exit fullscreen mode

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)
});

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)