I'm a bit confused about the MDN documentation of async await. These docs use the .then() syntax to respond when an async function has resolved:

mdn example

async function add() {
  const b = await resolveAfter2Seconds(30); // timer
  return b;
}
add().then(v => {
  console.log(v);  
});

But in my own code, I don't use .then() and it still works asynchronously. The flow is not blocked. So why would you use .then() ?

async code without .then

function start(){
    console.log("starting!")
    let d = loadData()
    console.log("this message logs before loadData returns!")
    console.log(d)   // this shows: Promise - Pending because d has not yet returned
}
async function loadData() {
    const response = await fetch("/");
    const json = await response.json();
    console.log("data loaded!")
    return json;
}

I'm a bit confused about the MDN documentation of async await. These docs use the .then() syntax to respond when an async function has resolved:

mdn example

async function add() {
  const b = await resolveAfter2Seconds(30); // timer
  return b;
}
add().then(v => {
  console.log(v);  
});

But in my own code, I don't use .then() and it still works asynchronously. The flow is not blocked. So why would you use .then() ?

async code without .then

function start(){
    console.log("starting!")
    let d = loadData()
    console.log("this message logs before loadData returns!")
    console.log(d)   // this shows: Promise - Pending because d has not yet returned
}
async function loadData() {
    const response = await fetch("https://swapi.co/api/films/");
    const json = await response.json();
    console.log("data loaded!")
    return json;
}

• javascript
• asynchronous
• async-await

• Have you tried throttling your connection to see if it's not an unfulfilled race condition? – silicakes Commented Nov 21, 2017 at 12:38
• 2 What if you want to use json, or ensure a piece of code runs as soon as loadData finishes? That's when you'd use then. – Joe Clay Commented Nov 21, 2017 at 12:40
• 3 I think you answered your own question. If you want the promise to work with, use the direct return from loadData(). If you want the json result, you'll need .then or something similar. – arbuthnott Commented Nov 21, 2017 at 12:40
• I was hoping to bind d directly to a Vue property (filling the UI when d returns), but apparently d is a Promise, so I still have to use .then() to get the contents of d. I was hoping this wouldn't be necessary! – Kokodoko Commented Nov 21, 2017 at 12:42
• Which begs the question of what await buys you if you still have to use .then. Short answer is that it cuts down on lengthy Promise chains while allowing you to keep functions simple for testing etc. – Jared Smith Commented Nov 21, 2017 at 12:42

4 Answers 4

First of all, all async functions return a Promise, so if you want to get the returned value from that async operation, you'll either need to use then or await inside an async function.

MDN uses .then because the add async function is being called outside an async function scope, so it can't use await globally to catch the data from the promise.

In your example, you get the same, an instance of Promise as the return of your loadData async function, if you define the start function also as async, you can use let d = await loadData(), if it's not async, you can use .then (which is the Promise API).

Async function declaration async function loadData() returns AsyncFunction which is executed asynchronously and always returns a Promise.

Basically all the code you put inside the async function someFunctionName will be executed inside that Promise and when you return some value inside that function – it will resolve that promise.

So that then() call is to get the actual value from that Promise that your function returned.

Your code works because it is not returning promise object and actually waiting for the response. It returns the json at the end. So, execution holds till it gets the response.

If your function is async you don't need to return promise, your return statement will wait for all 'await' statement before it to plete.

Your own code works, because you replaced the usage of .then() with the usage of async await.