Krzysztof Żuraw Blog

Chaining promises in JavaScript

May 28, 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.

Tagged with javascript promise

I turned off Disqus comments. If you want to give me feedback please write to krzysztof.zuraw(at)fastmail.com or use Keybase.


Krzysztof ŻurawDelivered by Krzysztof Żuraw. Opinions are my own. You can follow updates via RSS feed.