Fetch API & Promise

Promise

• Promise is an ES6 feature to escape callback hell.
• XHR is replaced by fetch API now.
• fetch() immediately returns a promise.
• Promise will be stored in LHS variable.
• Promise: object that is used as a placeholder for the future result of an async operation. Or we can its a container for an async delivered value. OR we can say its a container for a future value. Future value is the response coming from an AJAX call.

Adv of Promises:

1. NO longer needed to rely on events & callbacks passed into async fns to handle async results. callback fns can cause unpredictible results sometimes, hence its a big win.
2. Instead of nesting callbacks, promises can be chained for a sequence of async operations hence esscaping callback hell.

Promises are time sensitive, i.e change over time. Promise goes through the following lifecycle:

1. Pending
2. Settled/Fulfilled/Resolved or Rejected

• Promise is only settled once, the state will remain unchanged forever.
• Hence, promise is either fulfilled or rejected but its impossible to change that state.

COnsuming or Using a Promise:

• Consume a promise, is when we have a promise. Ex. a promise was returned earlier using fetch()
• For a promise to exist, it must first be built.
• Fetch() is what builds the promise & returns it for us to be consumed.
• .then() can be called on all promises for the result returned from the promise.
• A callback fn is passed into .then() as soon promised is resolved.
• This callback fn will have one argument which will be resulting value of he resolved promise. Ex. name it as 'response'. Actual data will be in the response.body which is a ReadableStream.
• .json() needs to be called on response coming from fetch fn for reading the data coming from response object. .json() is also an async fn hence it will also return a new promise which would also need a .then() to be resolved. If we return the result of response.json(), then we can apply another .then() for the fn to be resolved.
• Promises don't get rid of callbacks, they get rid of callback hell.

// This is a more clear & concise version of the above task.
const getCountryData = function(country){
  fetch(`https://restcountries.com/v3.1/name/${country}`)
    .then((response) => response.json())
    .then((data) => console.log(data[0]));
};
getCountryData('india');

Chaining Promises:

• .then() always returns promises whether we return anything or not.
• the second .then() returned value will become the fulfilled value of the returned promise which needs to be handled using .then() method.
• .then() methods have to chained, not nested else we'll go back to callback hell problem using .then() Hence always return a promise and then handle it using .then() from outside and not immediately attaching .then() after the .fetch()
• The above example makes uses of chaining promises.