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

twitter logo github logo ・1 min read

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.

twitter logo DISCUSS (23)
markdown guide
 

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

 

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

 

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

 
 

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

 

Few releases later VSCode will learn how to make coffee β˜•

 

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

 

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

 
 

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

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

 

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

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

 

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.

 
 
 

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πŸ”₯πŸ’―

 

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

 

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

 

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

 
Classic DEV Post from Oct 22 '18

Who's looking for open source contributors? (October 22nd edition)

We're towards the end of #hacktoberfest! Find something to work on or promote ...

Ben Halpern profile image
A Canadian software developer who thinks he’s funny.