Call an Asynchronous Function in a Promise Chain

Marius Schulz
InstructorMarius Schulz
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

In this lesson, we’re exploring how asynchronous functions can be seamlessly called within a promise chain — just like any other function that returns a promise.

[00:00] Right now our show GitHub user function fetches the user from the GitHub API and then prints the name and location to the console. Let's refactor this program such that the function only retrieves the user and then returns it to the caller, who can then decide what to do with it.

[00:18] The first thing we need to do is get rid of the log statements and say, "Return user." When an async function is called, it returns a promise. When the async function returns a value, the promise will be resolved with that value.

[00:32] In our case, the promise will be resolved with the user, which we just loaded from the GitHub API.

[00:39] If I hover over the function call down here, I can confirm that our asynchronous function does indeed return a promise. This means we can build a promise chain using the .then method and do something with the result.

[00:51] In this case, let's once more log the user's name and location to the console. Now that we've done the refactoring, let's run our program to make sure it still works.

[01:03] We'll head over to the console and say, "Node async JS," and there we go. We still get the name and the location. There's one more thing we could do to our show GitHub user function. Since we're not doing anything with the user except returning it, we can inline this variable and simply say, "Return await response.JSON."

[01:23] This example shows that it's quite easy to call an asynchronous function as part of a promise chain. Every async function returns a promise. It can simply call .then and .catch off of the return value.

Jake
Jake
~ 7 years ago

In this example, we await the fetch call and then we await the json parsing. Is it the same thing to await a fetch(url).json()?

Marius Schulz
Marius Schulzinstructor
~ 7 years ago

No, that's not the same.

fetch() returns a Promise, which has a then() method, but no json() method. Therefore, you can't do await fetch(url).json(). You could, however, do await fetch(url).then(res => res.json()).

Manuel Penaloza
Manuel Penaloza
~ 6 years ago

very nice tutorial, thx for that!

one question: at 00:42 you are demonstrating the function return value by hovering over the function execution. which text editor/plugin is enabling this?

albaqawi
albaqawi
~ 5 years ago

No, that's not the same.

fetch() returns a Promise, which has a then() method, but no json() method. Therefore, you can't do await fetch(url).json(). You could, however, do await fetch(url).then(res => res.json()).

YOU summarized in a 1 line reply what so many experts and CS educators failed! BLESS YOU MAN 👏🏻

albaqawi
albaqawi
~ 5 years ago

No, that's not the same.

fetch() returns a Promise, which has a then() method, but no json() method. Therefore, you can't do await fetch(url).json(). You could, however, do await fetch(url).then(res => res.json()).

YOU summarized in a 1 line reply what so many experts and CS educators failed! BLESS YOU MAN 👏🏻

sushmeet sunger
sushmeet sunger
~ 4 years ago

ESlint rules prescribe against using return await in an async function Eslint rules documentation . here https://eslint.org/docs/rules/no-return-await Since the return value of an async function is always wrapped in Promise.resolve, return await doesn’t actually do anything except add extra time before the overarching Promise resolves or rejects. The only valid exception is if return await is used in a try/catch statement to catch errors from another Promise-based function.

Ray Dai
Ray Dai
~ 2 weeks ago

having return response.json(); without await should be good here, you are returning a promise as normal promsie and should flatten one promise for you.

Markdown supported.
Become a member to join the discussionEnroll Today