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.

Comments

[Sung M. Kim]

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 😎.

[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

[WORMSS]

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

[Ben Halpern]

Yes, agreed.

[Mahmoud ElNaggar]

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

[Dmitriy Belyaev]

Few releases later VSCode will learn how to make coffee ☕

[Nicky Hajal]

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

[Ben Halpern]

Wow, that’s fantastic!

[Jonathan Sexton]

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

[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 }
  }
}

[Julien Eric]

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

[Mihail Malo]

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 }
  }
}

[Ben Halpern]

Credit: @umaar , of course.

[Umar Hansa]

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

[Ben Halpern]

Sounds good to me 😄

[Nick Taylor]

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🔥💯

[Ahmad Awais ⚡️]

VSCode is awesome! 👌

[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.

[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.

[JBoKu8]

Wow amazing

[Adrian B.G.]

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