Don't understand javascript promise antipattern returning promise from callback

Question

Can someone explain to me why returning promises to promises callbacks is considered antipattern? This seems to break the exception, but it is obvious that my understanding of promises is lacking, as I cannot clearly imagine how this will work. The following is the antipatter code:

var a = new Promise(function (res, rej) { setTimeout(function () { res("timeout"); }, 1000); }); a.then(function (res) { console.log("a"); console.log(res); return new Promise(function (res, rej) { console.log("b"); setTimeout(function () { res("timeout2"); }, 2000); }).then(function (res) { console.log("c"); console.log(res); }).then(function (res) { console.log("d"); console.log(res); }, function (res) { console.log("e"); console.log(res); }); }).then(function (res) { console.log("l"); console.log(res); }); 

EDIT:

This question is related to one of my previous questions , where I am doing something similar with promises, and one of the answers says:

"You shouldn't mix callbacks with promises either, because then you lose the selection bubbles (promises dot) and make your code super verbose."

So now I'm really confused if this is antipattern, and if so, why.

Answer 1

"You also shouldn't mix callbacks with promises, because then you lose the selection bubbles (dot promises) and make your code super verbose."

What Petka means here is that you should not use callback-based methods in your custom code along with promises, because it will make your code very verbose, as shown in your example.

It is verbose because you need to manually allow or reject a new promise based on a callback every time you call a function.

setTimeout Example:
At the end of the timeout, you must manually call the inverter. Now setTimeout is a bit of a bad example, as it does not have the ability to reject it.

 return new Promise(function (resolve, reject) { console.log("b"); setTimeout(function () { resolve("timeout2"); }, 2000); }) 

Best example
Suppose you want to call fs.readFile as follows:

 return new Promise(function (resolve, reject) { fs.readFile('foo.txt', function (err, res) { if (err){ reject(err); return; } else { resolve(res); } }); }) 

Here you need to allow or deny the broadcast, because you mix promises with callbacks, this will make your code very fragile and confusing.

Decision:

Instead of creating new promises everywhere when you need to call a method that only supports callbacks, wrap this callback method once and use it everywhere.

 var readFileAsync = new Promise(function (resolve, reject) { fs.readFile('foo.txt', function (err, res) { if (err){ reject(err); return; } else { resolve(res); } }); }); 

Bonus:

You don’t even have to do this, wrapping yourself, a blue bird has covered you. You can make a purchase here:

https://github.com/petkaantonov/bluebird/blob/master/API.md#promisification

All this is explained by the fact that it is quite possible to return Promise inside the onFulfilled promise onFulfilled . This is part of the Promise / A + specification, see The Promise Resolution Procedure → 2.3.2 If x is a promise, adopt its state [[3.4](#notes)]:

I assume that your confusion stems from the fact that Petka tells you not to create and return new promises in your example. But this is not due to the fact that you are returning Promises, but rather due to the fact that you should not create promises in this place, as indicated above.

Use a wrapped version, and then you can return / link them wherever you want.