new Promise() is not how you want to create a promise in JS (except when you really have to), just like 'new'/'delete' are not how you ant to allocate memory in C++ (except when you really have to). There are lots of helpers in that class that make promises significantly more ergonomic.

Care to give some examples of the helpers? I always just use new Promise()

Here's a few. The docs link to some others that may also be useful...

Promise.resolve()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

You can use this in place of new Promise() (though you rarely need it, as an async function automatically wraps any non-promise return value in a promise.)

----------

Promise.all()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

For making requests in parallel, and returning when all have been successful.

----------

Promise.allSettled()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

For making requests in parallel, and returning when all have completed whether successful or not.

----------

Promise.any()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

For making requests in parallel, and returning the first successful response.

--------

As mentioned in sibling comment, things like fetch and DB calls return promises anyway, so the above are mostly only useful for working with multiple other promises.

You really end up creating promises manually, the vast majority are downstream from an IO call like fetch() or a database query.

Many devs unnecessarily nest Promises like that.

    async function getData() {
      return new Promise((resolve) => {
        const res = fetch(…);
        resolve(res);
      });
    }

The response above is wrapped in THREE different Promises! One from fetch, one manually created, and one implicitly created by `async`.

The code above behaves exactly the same as

    function getData() {
       return fetch(…);
    }

or even just

    fetch(…);

I've been on teams working on node projects for like 15 years. I've never seen someone who understands promises or async await do that. You'd have to know nothing about what the async keyword actually does to be compelled to do that.

I mean, I know its a bit of linguistic flourish, but considering NodeJS was only initially released 12 years ago, that's quite a feat!

I have seen plenty of (usually junior front-end) devs resort to exactly this kind of cargo cult coding and magical thinking.

Well, they're junior devs. You're supposed to help them get past that stage, not just throw away all your tools.

What made you think I haven’t been helping them?

I'm going out on a limb here and assuming the issues with their code don't begin and end with async.

> I've never seen someone who understands promises or async await do that. You'd have to know nothing about what the async keyword actually does to be compelled to do that.

> usually junior front-end

So you agree with each other then?

Good day, axe handle.

> function getData() { return fetch(…); }

I feel like there are advantages to making it `async function`, even if it's superfluous, because it signals to readers and to static code analysis that the function returns a promise. That's assuming the return type of fetch(...) can't be inferred by static analysis and developer tooling.

> the type of fetch() can't be inferred by static analysis

That is preposterous.

It's not. One might assume it's Node fetch, but parent post was just using a specific example to make a general point. Fetch can be `any`thing.

Would you say the same thing about

function getData() { return mysteryFunction(…); }

I'm a newbie with respect to JS and especially promises and async/await, but I need to learn. If you could point me to some resource that does a really good job of explaining all this, I'd appreciate it very much. I expect that I wouldn't be the only one. What's something you'd recommend to a junior developer so that they wouldn't be one of the "many devs", as you put it, who do the wrong thing?

Not the parent, but I recommend understanding the event loop first: here [0] is a very good talk. Then, read the chapter on promise on javascript.info [1], as it explains the problems Promise set out to solve (callback hell), then as usual the excellent MDN article [2].

[0] https://www.youtube.com/watch?v=8aGhZQkoFbQ

[1] https://javascript.info/async

[2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guid...

Just watched that video. Thanks! Excellent resource. Moving on to your other links.

The whole async/await paradigm (including promises) is trying to fit square pegs into round holes (trying to make async processes look like they are synchronous). Just look at the comments on this page; even though async/await/promises have been around for years they are still causing difficulties for even the most experienced devs.

It doesn't mean it can't be mastered, it can, but the whole paradigm is so fraught with pitfalls and conceptual difficulties that an codebase that uses it in any extensive way will forever be unstable. The whole thing is supposed to help against callback hell, but that can be better solved by a simple thenable object.

Not a popular opinion I know, but there you go.

> trying to make async processes look like they are synchronous

That is NOT what async/await is about — after all, async explicitly marks functions as asynchronous. Not exactly trying to hide that.

Async/await is syntactic sugar. It is there to make working with Promises less verbose.

That is almost all: await pauses current function execution in the main event loop, which is an important detail

> simple thenable object

Wouldn't you simply be reinventing promises?

Actually no. A promise is a thenable oject, true, but a complex one. Simple thenable objects are in the simplest form objects that internally just holds an array of methods defined in each then() block. These methods then execute one after another at runtime. Any slightly experienced dev can probably create a library object or class like this in under 100 loc as a dropin replacement for most promises needs, and get a firm grasp of the internals in addition.

The usage of such an object won't be as terse and seemingly elegant as await syntax, but this is part of the problem: with await/promises so much of the complex logic is hidden from view and instead needs to reside the head of each dev, where it needs to compete with a thousand other things that need attention. It's an expression of the constant but unhealthy tendency towards golfing that pervades our field IMO.

Yeah, up until you need some extra functionality and you fall into the Inner-Platform effect (https://en.m.wikipedia.org/wiki/Inner-platform_effect). Promises are a well-established and battle-tested standard, I'd be very weary of someone reimplementing them for no reason.

This doesn't directly answer your question, but... something to watch out for is experienced developers can also struggle with promises and async code if they've spent most of their career working with sync code. And when we 'get' it, the difficulty of the journey is often understated. This stuff can be hard, so don't sweat it if it seems frustrating. (On the other hand, it may be easier if you don't have years of sync patterns to mentally set aside )

Thanks for this feedback.

Nobody has yet noticed that it’s only wrapped in TWO Promises. I take it nobody really understands the syntax, author included.

This is absolutely correct why is it being downvoted lol

It really isn't, most native/standard APIs do not return Promises. Lots of things use callbacks. Being comfortable creating Promises from a callback-based API is definitely something any competent JS dev ought to be able to do.

A lot of APIs produce promises these days. The big one that I always need to promisify is `setTimeout`, but apart from that, I tend to find that if I'm using the `new Promise` API, I'm usually doing something wrong.

With Node APIs, there's a promisified version of pretty much everything. With browser APIs, there's usually a version with promises, and I'm struggling to think of an asynchronous API without promises that hasn't been superseded by something else (e.g. XMLHttpRequest -> fetch). If I'm converting from an event-emitter API to promises, there's usually going to be an impedance mismatch between the expectations of the event-based system and the promise-based system, and I probably need to explore another option.

I agree that any competent JS dev should understand how to create promises "from scratch" like this. But it still should probably be a fairly rare occurrence, and if I see a lot of `new Promise` calls in one place, it's pretty much always a sign that someone doesn't really understand how promises work.

I prefer async/await but this is a contrived example.

For starters you can just write:

    const myfunc = () => new Promise(resolve => resolve())

or

    Promise.resolve()

   const myfunc = () => new Promise(resolve => resolve())

Is there anyone that actually likes this structure? I find it really hard to reason about what a line like this does. What is the upper limit on double arrows in one line?

here's a real world example I use all the time:

    const wait = (ms = 500) => new Promise(resolve => setTimeout(resolve, ms));

then:

    async function () {
      await wait(1000);
    }

Perhaps it's hard to grok but it sure is a handy one-liner.

Of course in newer versions of node we can now do:

    import {
      setTimeout,
    } from 'timers/promises';

    await setTimeout(100);

There's no merit of what should be a project wide function being a single line instead of 3 to avoid "hard to grok" syntax.

Wait till you see the rest of javascript...

Your comment is snarky and categorically dismissive. Care to explain why you have taken such an aggressive stance against JS?

this works in older versions of node too:

const wait = require(‘util’).promisify(setTimeout)

but not in the browser

It’s the cleanest way to wrap a event-emitting library, for example. async/await is not applicable in such a case where resolve needs to be explicitly called in a callback.

    async function process() {
      return new Promise((resolve, reject) => {
        emitter.on(”error”, (err) => reject(err));
        emitter.on(”end”, (result) => resolve(result));
        emitter.start();
      });
    }

async is not strictly needed here, but I find it a good practice to use it on functions which immediately return a Promise anyway.

I don't think it's a good practice, atleast if you have typescript jn your stack. It's redundant and wraps the promise in another promise.

IIRC that doesn’t actually happen if a native Promise is returned.

It does, but only if you also add a redundant await. Which I still do, even in TypeScript, unless there’s a compelling performance reason not to. I disagree with the article overall, but I do agree that making asynchrony as explicit as possible is a good idea. Otherwise you end up with code like:

  async function foo(bar) {
    // ...
  }

  function nonObviousAsyncFn() {
    // ...
    return foo(quux);
  }

Explicit return types would help, but most people don’t write them unless they’re forced by a linter.

This would still return a promise for both functions. My IDE at least is really obvious about what happens.

Yes, this is a common anti-pattern

    return await foo();

Your gripe is that there are two arrows on one line? The second is an argument to the promise constructor. You should be able to reason about this line easily.

I think I was unclear. Of course you can figure out what the line does. It’s just that you have to figure it out.

If the implication is not that the "double arrows" are tripping you up, then yes you were unclear.

As soon as you need to chain Promises, this gets very annoying and you quickly find yourself in a nested callback hell.

If you’re nesting “new Promise” you’re almost certainly doing it wrong. This is for generating new promises not executing them.

I agree but second one could just be `() => Promise.resolve()`

It could, but depending on how you use it, you're changing scoping.

True. But these days it's rare to see a scope other than what you'd expect from the short hand version. Old school JS with plain prototypes and flexible 'this' scope is very powerful, but is too hard to understand and thus rare these days.

That’s one of the neat things about JS: even outside the prototypal inheritance chain, classes can be (partially) composed of generalized, reusable functions, a bit like traits. Just import a function and bind it in the constructor (call).