Promises are just a technical implementation of what real-world promises do! Suppose you had promised your boss that you would complete tasks assigned to you. If you do, that means a promise has been resolved and if you don't, it means it's been rejected. Similarly, a Promise in HTTP implementation means that we will wait for future data, either resolved or rejected, and then we'll do some logical processing based on the output received.

HTTP promises are a way to keep a placeholder for future data based on the success or failed states. Does this sound similar to regular HTTP calls? Yes, they are, with a major striking difference—promises are asynchronous in nature. When we make HTTP calls in Angular, it will wait until the request is completed and we receive the response; JavaScript will continue with the execution and, if it encounters synchronous assignments/operations, it will execute them immediately and fail if they are dependent on previous states or data.

A promise takes a callback method, which will take two parameters—resolve and reject. resolve means the method will return a promise object with a given message, while reject means the promise object is rejected with a reason. Then, you can expect .then and .catch to be called back if all goes well or not, respectively. The following is the sample code for writing a promise, showing the handling responses of resolve and reject:

//check if the listing status is active
ListingDetails(listing){
let promise = new Promise(function(resolve, reject) {
if(listing.status == 'active') { 
  resolved("listing is active");
}
else {
  reject("listing is not active");
}

promise.then((s => { 
//next steps after the promise has returned resolved
}).catch((err => {
// what to do when it's error or rejected
})

}

Let's analyze the preceding code in detail. We have implemented a promise and, as specified, the callback method will take two parameters, resolve and reject. We check whether the status of the listing is active; if yes, we resolve the promise; otherwise, we reject the promise. By default, the data returned by the resolved method will be passed to the .then method, and any failures or exceptions will be passed to the .catch method.

Since promises are asynchronous, which means we can chain events or methods, go ahead and add a method that will be called inside the .then method.

Awesome! We are now armed with all the theoretical knowledge about the classes and modules provided by Angular for HTTP functionality. We learned about HttpClientModule, HttpClient, and, above all, we learned about the various HTTP verbs we can make use of in our application. We also learned about HTTP observables and promises. 

Now, it's time to get our hands dirty with code. We will learn how to create our multiple data sources, which we will need to integrate using HTTP calls. The first one will be using the fake JSON server APIs, while the second one will be using the Firestore database. In the next section, we will learn about, and create, the services that we will need before we start our mission of integrating functionality end to end.