Javascript promises are a powerful tool that allow developers to handle asynchronous code in a more efficient and organised way. They essentially provide a way to handle the outcome of a function that may or may not have completed execution by the time it is called.

One of the benefits of using promises is that they allow for the chaining of asynchronous actions, meaning that the outcome of one function can be passed as input to another function and so on. This helps to eliminate the need for callback hell, where code becomes increasingly nested and difficult to read as more asynchronous functions are added.

Here is an example of a simple promise in action:

Copycopy code to clipboard
1const fetchData = () => {
2  return new Promise((resolve, reject) => {
3    fetch('https://api.edvins.io/data')
4      .then((response) => response.json())
5      .then((data) => resolve(data))
6      .catch((error) => reject(error));
7  });
8};
9
10fetchData()
11  .then((data) => console.log(data))
12  .catch((error) => console.error(error));

In this example, the fetchData function makes an API call to retrieve some data. The fetch method returns a promise, which we can then chain using the then method. If the promise is resolved, the data is logged to the console. If the promise is rejected, an error message is logged to the console.

Promises also have a built-in method called catch, which allows us to handle any errors that may occur during the execution of the promise. This helps to ensure that our code does not break if something goes wrong.

Promises can also be used to execute multiple asynchronous actions concurrently using the Promise.all method. This method takes an array of promises as an argument and returns a new promise that resolves when all of the promises in the array have resolved.

Here is an example of how to use Promise.all:

Copycopy code to clipboard
1const fetchData = () => {
2  return new Promise((resolve, reject) => {
3    fetch('https://api.edvins.io/data')
4      .then((response) => response.json())
5      .then((data) => resolve(data))
6      .catch((error) => reject(error));
7  });
8};
9
10const fetchImages = () => {
11  return new Promise((resolve, reject) => {
12    fetch('https://api.edvins.io/images')
13      .then((response) => response.json())
14      .then((images) => resolve(images))
15      .catch((error) => reject(error));
16  });
17};
18
19Promise.all([fetchData(), fetchImages()])
20  .then((results) => console.log(results))
21  .catch((error) => console.error(error));

In this example, we have two separate functions that make API calls to retrieve data and images. We use Promise.all to execute both of these functions concurrently and then log the results to the console when both promises have resolved.

Overall, JavaScript promises are a useful tool for handling asynchronous code and can help to make our code more organised and easier to read. They provide a way to chain asynchronous actions and handle errors, as well as executing multiple actions concurrently. If you are working with asynchronous code in JavaScript, it is definitely worth learning how to use promises.