Chaining promises in JavaScript

How to chain promises in modern JavaScript

Posted on Sun 28 May 2017

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.

Cover image from Unsplash under CC0.

If you find this blog post interesting please share:

Comments !