Promises Good Practice

Question

Quick question.

For a complex Promise function, is it better to organize your code like this:

One unique function with the smallest functions possible next to each oher

var a = () => {
    return new Promise((resolve, reject) => {
        return promise1().then((result1) => {
            return promise2(result1)
        }).then((result2) => {
            return promise3(result2)
        }).then((result3) => {
            return promise4(result3)
        }).then((result4) => {
            resolve(result4)
        }).catch((error) => {
            reject(error)
    })
}

or like this

Encapsulate some of the complexity into other functions to have a simpler high level function.

var b = () => {
    return new Promise((resolve, reject) => {
        return promise12().then((result12) => {
            return promise34(result12)
        }).then((result4) => {
            resolve(result4)
        }).catch((error) => {
            reject(error)
        })
    })
}

var promise12 = () => {
    return new Promise ((resolve, reject) => {
        return promise1().then((result1) => {
            return promise2(result1)
        }).then((result2) => {
            resolve(result2)
        }).catch((error) => {
            reject(error)
        })
    })
}

var promise34 = (result2) => {
    return new Promise ((resolve, reject) => {
        return promise3().then((result3) => {
            return promise4(result4)
        }).then((result) => {
            resolve(result4)
        }).catch((error) => {
            reject(error)
        })
    })
}

[Separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) — Andreas, Mar 10 '17 at 16:29
That would be my opinion only, hence I've voted to close as "primarily opinion-based" — Andreas, Mar 10 '17 at 16:37
You're using what's called the promise constructor anti-pattern. Have a look at this question/answer: http://stackoverflow.com/a/25569299/4108919 Avoiding all those `new Promise((resolve, reject) => { return anotherPromise().then(resolve).catch(reject)})` will already greatly simplify your code. — forrert, Mar 10 '17 at 16:38
There is no generic answer to this question. It depends upon a lot of specifics of your code, which pieces are most related to one another, which pieces you might want to encapsulate so you can reuse elsewhere and it depends upon personal style and opinion. This generic question as currently written has no generic answer. — jfriend00, Mar 10 '17 at 17:42
@forrert I am not sure to understand what can be improved. Could you give an example withe the code from a? — Quentin Del, Mar 10 '17 at 17:53
@QuentinDel in example a) since your function `promise1()` already returns a promise (you're invoking the `then` function on the result), the example can be simplified to: `var a = () => promise1().then(promise2).then(promise3).then(promise4)`. This will accomplish exactly the same as your code. — forrert, Mar 10 '17 at 17:58

score 2 · Accepted Answer · answered Mar 10 '17 at 16:36

There's no "best way" to organize your code. You should consider separating your functions into logical modules, so that their usage is "intuitive".

Also, you haven't mentioned generators (functions with * next to them), which is a new javascript ES6 feature. Very likely that in the future these generator function will be a 'de facto' way to handle asynchronous code, because they are well designed to handle it. They are also easy to read and test. You can watch this (currently) free course by Max Stoiber to learn more about them. This course is specifically designed to show how you can write asynchronous code with generator functions.

Promises Good Practice

1 Answers1