Promise.all() and then() issues

Question

Im having some issues with Promise.all()

Im trying to use this chain:

Promise.all([
    this.newContainerLoading,
    this.gsapAnim()
])
.then(
    Promise.all([
        this.fadeOut.bind(this),
        this.preload.bind(this)
    ])  
)
.then(this.fadeIn.bind(this))

But for some reason the 2 functions in the second Promise.all() are not even being called? Eg fadeOut() and preload() dont appear to be called at all, and the chain just skips to the final then() and does the fadeIn()

Any ideas as to what Im doing wrong?

Answer 1

bind is used incorrectly here. The result of .bind(this) is bound function. It is not being called, unless it is called explicitly like this.fadeOut.bind(this)().

The purpose of using bind with promises is to use bound functions as callbacks. Promise.all doesn't accept callbacks, but then does. And Promise.all returns a promise, so it has to be wrapped with arrow function. It should be:

Promise.all([
    this.newContainerLoading,
    this.gsapAnim()
])
.then(() => 
    Promise.all([
        this.fadeOut(),
        this.preload()
    ])  
)
.then(this.fadeIn.bind(this))