fetch_api.md - z22756392z/wp109b GitHub Wiki

The method ,XML HTTP request object, we've been using is an old way to make these request.

And there's is a new way and quicker way to make this request using the native fetch API which is now built into the language.

And it's going to require us to write much less code than the older way using the XML HTTP request object.

Also it's going to implement the promise API under the hood which gonna make handling success in error case easy too.

fetch(resource).then((response) => {  // this return us a Promise. So it is either resolve or reject then, we can use the then method.
  console.log('resolved', response);
}).catch((err) =>{  // it is going to fire a callback function when there is an error.
  console.log('rejected', err);
});  

The way the fetch API work is that the promise is only ever rejected when we get some kind of network error for example if we're offline or we can't reach the API for some reason.

So that's when we get a rejection. If we just mistype url or the endpoint or the resource then we don't get a rejection it's not rejected.

Instead, it's sill resolved and we get the response.

However, in the response if we expand that we can see have a status of 404 is basically mean the resource can't be found.

So we can still do a check for the status to make sure it's 200 before we do something with the data and then log out the error if we get 404 or something.

But if there's a network error and we can't for whatever reason reach the resource then it's going to reject and we're going to fire the callback function

fetch(resource).then((response) => {  // this return us a Promise. So it is either resolve or reject then, we can use the then method.
  if(status === 200 // or something)
  console.log('resolved', response);
  else if(....)
}).catch((err) =>{  // it is going to fire a callback function when there is an error.
  console.log('rejected', err);
});  

The object we get from response is something that the fetch API creates for us when we go out and get data and it's return to us, this response object.

However, inside the response object we can't see the data in here.

Now if we open up the proto where a lot of methods are found inside. We can see the method called json.

So what we can do is use the method on the response object and that acutally gets us the data.

fetch(resource).then((response) => {  // this return us a Promise. So it is either resolve or reject then, we can use the then method.
    console.log('resolved', response);
  //response.json(); 
  // this method right here get us a data and it passes it much like before we use json.pass this right here give use the response data
  // And it passes it so that we can use it inside our code easily.
  //
  //const data = response.json();
  //this won't work and the reason is because response.json right here is return **a Promise**
  //Promise is something that typically takes a little bit of time to do and it can either be rejected or resolved.
  //So if this is returning a Promise what we could do is instead

    return reponse.json();//say return right here so the overall value the return value of this thing is this promise right here.
  }).then(data => {// then we can tack on another then method inside here and this is promise chain
        // we can actually take the data that we get back from the json method which when resolved gives us the data that we need 
        console.log(data);
  }).catch((err) =>{  // it is going to fire a callback function when there is an error.
        console.log('rejected', err);
});