DEV Community

Ben Halpern
Ben Halpern

Posted on

Visual Studio Code can now convert your long chains of Promise.then()'s into async/await automagically

VSCode is continuing to evolve in pretty fascinating ways.

I'm curious about whether I'd actually make use of something like this, but I definitely find it interesting if it gets out of the way when not being used.

Discussion (25)

Collapse
dance2die profile image
Sung M. Kim • Edited

I'm curious about whether I'd actually make use of something like this

async/await sometimes looks less readable than promise.then counter-part.

So one can use it when async/await version makes it more readable 😎.

Collapse
razvanilin profile image
Razvan Ilin

I agree with this completely. I tried refactoring my code to async/await because it was the new thing, but I ended up sticking with promises because the code was much cleaner

Collapse
wormss profile image
WORMSS

It's very useful when you have if's especially if you have conditional diamond forks.

Collapse
ben profile image
Ben Halpern Author

Yes, agreed.

Collapse
lenaggar profile image
Naggar

I completely agree .. I can orchestrate the chains of thens in a Promise however it makes it more readable for me

Collapse
dbelyaeff profile image
Dmitriy Belyaev

Few releases later VSCode will learn how to make coffee ☕

Collapse
nickyhajal profile image
Nicky Hajal

If I recall correctly, the changelog also mentioned this was thanks to a summer intern on the VSCode team. Pretty cool!

Collapse
ben profile image
Ben Halpern Author

Wow, that’s fantastic!

Collapse
jsgoose profile image
Jonathan Sexton

That's a really cool aspect of this, go summer intern!

Collapse
qm3ster profile image
Mihail Malo

Cool, and there are definitely valid use cases for this, but I am scared the people who are too enthusiastic about async/await will abuse this and the amount of PRs that change

const getPosts = () =>
  firebase
    .firestore()
    .collection('posts')
    .orderBy('timestamp')
    .get()
    .then(querySnapshot => querySnapshot.map(doc => doc.data()))

export default {
  name: 'Home',
  data: () => ({
    posts: []
  }),
  async asyncData() {
    return { posts: await getPosts() }
  }
}

into

export default {
  name: "Home",
  data: () => ({
    posts: []
  }),
  async asyncData() {
    let posts = []
    await firebase
      .firestore()
      .collection("posts")
      .orderBy("timestamp")
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          posts.push(doc.data())
        })
      })
    return { posts: posts }
  }
}
Collapse
julieneric profile image
Julien Eric

Why would it leave a then hanging off of an async call?

Collapse
qm3ster profile image
Mihail Malo • Edited

Which one are you talking about?

You mean the abuser would write the following?

export default {
  name: "Home",
  data: () => ({
    posts: []
  }),
  async asyncData() {
    let posts = []
    const querySnapshot = await firebase
      .firestore()
      .collection("posts")
      .orderBy("timestamp")
      .get()
    querySnapshot.forEach(doc => {
      posts.push(doc.data())
    })
    return { posts: posts }
  }
}
Collapse
ben profile image
Ben Halpern Author

Credit: @umaar , of course.

Collapse
umaar profile image
Umar Hansa

Hey Ben, I'd be down for an AMA as @nickytonline suggested (thanks Nick for the kind words about the course 😊️)

Collapse
ben profile image
Ben Halpern Author

Sounds good to me 😄

Collapse
nickytonline profile image
Nick Taylor (he/him)

You should ask @umaar if he'd be up for an AMA. He's a dev tools guru. I signed up for his moderndevtools.com last year and it's🔥💯

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️

VSCode is awesome! 👌

Collapse
gene profile image
Gene

// Unrelated
I've read a lot of good things about axios, but never from a DEV community member yet. I wish to read one soon! Especially why fetch is better than axios instead of why axios is better than fetch like what most articles I've read says so.

Collapse
shawnlan profile image
shawnlan

We have to be careful and understand how async/await works. The converted code doesn't behave exactly the same in the twitter example. Before conversion the function returns a promise that resolves with undefined, and console.log(err) is called. After conversion, the function returns a promise that rejects, and console.log(err) is not called. We would assume the converted code should behave the same; thus it's a bug IMO.

Collapse
asparallel profile image
AsParallel

Definitely useful for legacy code updating. Also nice given as far as I'm aware there's no autofixer for it in linters.

Collapse
ben profile image
Ben Halpern Author

I was thinking more about writing new code than updating old code. That’s a very strong use case!

Collapse
jboku8 profile image
JBoKu8

Wow amazing

Collapse
voodooattack profile image
Abdullah Ali

Beautiful.

Collapse
bgadrian profile image
Adrian B.G.

Watchout I saw some bugs reported on this feature, like all refactorings keep an eye on it and add more tests 😀