Week 5 - Promises, promises, promises
Tags: javascript, webdev, beginners, programming
Published: 2022-05-29 19:46:18

API communication is the pivotal point in how websites communicate between each other and this is where JavaScript shines. This blog post delves into how JavaScript works through the use of Promises, and Fetch.

The main resources used are:
- Main Resource - [LearnJavaScript.online](https://learnjavascript.online/)

## What Was Learnt
Promises have been the main stay of my weeks revision, along with the fetch function. 

Promises provide the functionality to achieve asynchronous communication between clients and servers. When a client and server talk, the communication stream can take a period of time to respond. With this being the case, synchronous communication begins to fall down as it blocks or in other words freeze the application.

Asynchronous programming enables applications to be non-blocking, that allows the application to continue processing, but also allows for communicating between a client and server in the background. Promises are the key to making this work. 

Promises object within JavaScript allows communications between client and servers to share data between one another. A client connects to a server through a URL. The server returns a promise, ensuring that the client and server share communication stream but allow for a period of time for data to be sent. The following code example demonstrates how an API function might return a `Promise` when it has been contacted by a client:

```
function getMyAPI(ip){
    return new Promise((resolve, reject) => {
           if(ip === "127.0.0.1"){
                reject("No local host addresses please...");
           }
           resolve({
                msg: "Yay you got my message...";
           });
    })
}
```

The outcome of this code example can be split into three stages:
- Pending - The state that is used when communication is being conducted
- Fulfilled - When the communication is complete, even if there is a 404
- Rejected - Communication has been failed, perhaps through network issues

The `resolve` function provides a fulfilled state to the promise, this is where data is typically sent back in JSON format.

The `reject` function provides an error for the communication stream so that developers can handle the outcome.

By now, this should remind you of another type of functionality, the try-catch structure.

```
try {
   // handle success
} catch {
   // handle error
}
```

To handle the promise that an API returns, we can use the follow code example:

```
    fetch("fakeSite").then(response => response.json()).then(data => console.log(data)).catch(error => console.log(error));
```

In this example, a promise is returned by the fetch function, which is handle by the `then` function. This handles the response from the API. The `.json()` part of the function itself returns another promise, which we can use the `.then` function again to handle the data. Finally, the `.catch` handles any errors asynchronously preventing the application from blocking.

Finally, to handle the data of the second `then` we should consider passing the data to a function, in this case we have used `console.log` but we can send it to a database for example. The reason we do this, is because the data does not live outside the scope of the `then` function.

One of the key findings of this weeks learning has been the interaction of asynchronous coding style. One key importance of using async code is to ensure that all code is asynchronous throughout the life span of that function. If not, the application will become blocking, and slow down the speed and performance of the application.

## Resource Review
LearnJavaScript has been an excellent resource for learning this important concept. LearnJavaScript has been able to explain the concept through step-by-step approach that builds each lesson. One of the most important concept for learning `promises` has been the comparison to `try catch` structure. A typically hard concept for many, LearnJavaScripts step-by-step breakdown of the concept in suitable components.

## Retrospective
The promise and fetch execution has been an interesting topic. For learning this functionality, it is worth building fake API functionality, or even to interlinking with third-party APIs to get a wider understanding of the process. Additionally, it is also quite fun to capture the traffic within Wireshark to understand the networking side of HTTP.

Over the next week I will try to apply third-party interaction to compound the learning that has been done so far.

## Sign Off
It has been a turning point over the course of the week and has highlighted how proficient JavaScript can be.

Until next week!

Jack/eXit