Chaining promises in JavaScript

In this blog post, I will present to you how you can chain promises JavaScript. Let's go!

Recently I ended my small side project . I used there google maps api to perform various tasks. All the responses from Google API were asynchronous so I thought: let's wrap them in promises! I did it and everything works as expected.

After a few days, I had this idea to present my project in r/javascript. And I got code reviewed. Guys told me that I'm doing something wrong here. I want to escape from callback hell but I got into promises purgatory.

My code looks like this:

geocodeAddress(placeValue).then((geocodedCoords) => {
const mainWayPoint = createMainWaypoint(geocodedCoords);

createPoint(map).then((startingCoords) => {
createPoint(map).then((endCoords) => {
calculateAndDisplayRoute(
directionsService,
directionsDisplay,
mainWayPoint,
startingCoords,
endCoords,
);
});
});

Here lays the main logic of my application. When a user enters the name of the place I geocode it in geocodeAddress. If everything is ok I create the main point from these coordinates. In createPoint, I use one time click on map event listeners so the user can create start and end point. The last thing is to display route between those 2 points with a waypoint.

I started digging a little bit into what is promises chaining and I was able to refactor it to this form:

geocodeAddress(placeValue)
.then((geocodedCoords) => createMainWaypoint(geocodedCoords, map))
.then((mainWayPointCoords) => {
mainWayPoint = mainWayPointCoords;
return createPoint(map);
})
.then((startingPointCoords) => {
startingPoint = startingPointCoords;
return createPoint(map);
})
.then((endPoint) => {
calculateAndDisplayRoute(mainWayPoint, startingPoint, endPoint, map);
});

It's doing exactly the same but code is far more readable than before. I can also add error catching with a catch. All code for this project is on github.

That's all for today! Feel free to comment - they are really valuable.