Convert Any Function into an Asynchronous Function

Marius Schulz
InstructorMarius Schulz
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

Any function can be made asynchronous, including function expressions, arrow functions, and methods. This lesson shows the syntax for each of the function types.

[00:01] JavaScript allows us to convert any function into an async function. So far we've worked with function declarations but we haven't yet looked at function expressions, error functions, or methods. Let's go ahead and convert this function declaration into a function expression.

[00:18] We'll cut the name here, and we'll introduce a variable, and then assign the function expression. That's it. Now we have an async function expression which does the same as our previous function declaration.

[00:32] We could also write this function as an arrow function using the arrow function syntax and the async keyword, like this. As you can see, the async keyword works with all function types, so it's a matter of personal preference or style, whichever one you pick. I prefer to use function declarations wherever possible so I can make use of function hoisting.

[00:54] Let's now look at a good use case for an async function expression. The await keyword can only be used within asynchronous functions, so we cannot use it at the top level of a file. Therefore, this syntax is not valid. What we need here is an async function wrapper around these lines.

[01:13] We'll say async function and then indent these lines and we're immediately going to be invoking this function. What we have here is the classic JavaScript IIFE pattern -- the immediately-invoked function expression. If you wanted to you could even make this an arrow function.

[01:33] Finally, let's implement an async class method. First of all we're going to need a class, so let's define a GitHub API client class and that class has a method called fetch user. Within that method we have the three lines from before.

[01:54] We can now put the async keyword in front of the method name to make the method asynchronous. The same syntax is used within object literals to create asynchronous methods using the ES2015 shorthand method syntax. Down below, we're going to create an instance of the class and call it client. We'll say client.fetchUser.

[02:18] Let's now run the program to make sure everything is working as expected after we've made all these changes. Sure enough, everything is working just fine.

egghead
egghead
~ 11 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today