DEV Community

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

Ben Halpern on September 29, 2018

VSCode is continuing to evolve in pretty fascinating ways. // Detect dark theme var iframe = document.getElementById('tweet-104565506947833...
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

Yes, agreed.

Collapse
 
lenaggar profile image
Mahmoud ElNaggar

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

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

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

Sounds good to me πŸ˜„

Collapse
 
nickytonline profile image
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πŸ”₯πŸ’―

Collapse
 
ahmadawais 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
 
jboku8 profile image
JBoKu8

Wow amazing

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 πŸ˜€

Collapse
 
ben profile image
Ben Halpern

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

Collapse
 
voodooattack profile image
Abdullah Ali

Beautiful.